React+antd在一个Modal里面使用树状结构的Table时,实现第一列的文本内容过长时换行后对齐显示

React+antd在一个Modal里面使用树状结构的Table时,第一列的文本内容过长换行不对齐怎么修复
React+antd在一个Modal里面使用树状结构的Table时,实现第一列的文本内容过长时换行后对齐显示_第1张图片

上图可以看到文本换行之后是没有对齐的

检索看到它的结构是这样的,文本把td的整个内容占完了,第一行由于span 和 button占着位置,所有没有从最开始显示,这是不合适的,我们可以为这个文本加一个div标签

React+antd在一个Modal里面使用树状结构的Table时,实现第一列的文本内容过长时换行后对齐显示_第2张图片

在table渲染行的第一个属性中加一个render,为这一行的文本加一个div,使用flex和overflowWrap实现我们想要的效果

image.png

  const columns = [
    {
      title: ' PRJ名称',
      key: 'projectName',
      dataIndex: 'projectName',
      render: (text) => 
{text}
, }, ...

这样我们想要的效果就实现了

React+antd在一个Modal里面使用树状结构的Table时,实现第一列的文本内容过长时换行后对齐显示_第3张图片

你可能感兴趣的:(bug修复,react.js,javascript,ecmascript,前端)