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

React+antd在一个Modal里面使用树状结构的Table时,第一列的文本内容过长换行不对齐怎么修复
image.png

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

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

在这里插入图片描述

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

image.png

  const columns = [
    {
      title: ' PRJ名称',
      key: 'projectName',
      dataIndex: 'projectName',
      render: (text) => <div style={
  {display:"flex",flexDirection:"row",alignItems:"flex-start",overflowWrap: "anywhere"}}> {text} </div>,
    },
    ...

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

image.png

最近更新

  1. DHCP&IP、Lan IP&Lan Static IP

    2024-01-19 08:16:02       0 阅读
  2. 在Ubuntu 16.04上安装和配置VNC的方法

    2024-01-19 08:16:02       0 阅读
  3. Flink推测机制

    2024-01-19 08:16:02       0 阅读
  4. Vue3框架搭建2:axios+typescript封装

    2024-01-19 08:16:02       0 阅读

热门阅读

  1. MATLAB Fundamentals>>>Creating Datetimes

    2024-01-19 08:16:02       33 阅读
  2. linux安装hadoop详细步骤

    2024-01-19 08:16:02       40 阅读
  3. SOH 均衡技术发展方向及建议

    2024-01-19 08:16:02       32 阅读
  4. [go] 适配器模式

    2024-01-19 08:16:02       30 阅读
  5. Docker初步使用

    2024-01-19 08:16:02       34 阅读
  6. OpenHarmony之HDF驱动开发流程指导

    2024-01-19 08:16:02       33 阅读
  7. qml开发Android平台,加载本地html

    2024-01-19 08:16:02       31 阅读