table的Column的ellipsis属性

先说问题：数据宽度太大，列表又不想换行，数据直接放进去的效果---table内的数据会超出父元素div的宽度

 为避免这种尴尬的问题，可以在column的任意对象中里边使用ellipsis属性

 const columns = [
    {
      title: 'col1',
      dataIndex: 'a',
      key: 'a',
    },
    {
      title: 'col2',
      dataIndex: 'b',
      key: 'b',
    },
    {
      title: 'col3',
      dataIndex: 'c',
      key: 'c',
    },

    {
      title: 'col4',
      dataIndex: 'd',
      key: 'de',
      ellipsis: true,
    },
    {
      title: 'col5',
      dataIndex: 'e',
      key: 'e',
    },

    {
      title: '操作',
      dataIndex: 'operate',
      key: 'operate',
      render: (_: any, record) => (
        <div>
          <Typography.Link
            style={{ cursor: 'pointer' }}
            onClick={e => {}}
          > 
            查看详情
          </Typography.Link>
        </div>
      ),
    },
  ]

效果呢就是在数据右下角显示一个框，框内为全部数据，没有设置ellipsis属性的数据换行展示

 至于原因，在Antd的文档上也有说明，设置ellipsis后，表格布局会变为fixed，未设置表格布局是auto，类似于overflow：auto，会超出容器宽度。

 至此，table内数据超出父元素div宽度的问题已解决。

关于悬浮展示样式优化，可以在column中加render来解决

const columns = [
    {
      title: 'col1',
      dataIndex: 'a',
      key: 'a',
      render: (text) => (
        <Typography.Text ellipsis={{ tooltip: { getTooltipContainer: () => document.body 
       } }}>
          {text}
        </Typography.Text>
      ),
    },
    {
      title: 'col2',
      dataIndex: 'b',
      key: 'b',
      render: (text) => (
        <Typography.Text ellipsis={{ tooltip: { getTooltipContainer: () => document.body 
       } }}>
          {text}
        </Typography.Text>
      ),
    },
    {
      title: 'col3',
      dataIndex: 'c',
      key: 'c',
      render: (text) => (
        <Typography.Text ellipsis={{ tooltip: { getTooltipContainer: () => document.body 
       } }}>
          {text}
        </Typography.Text>
      ),
    },

    {
      title: 'col4',
      dataIndex: 'd',
      key: 'de',
      ellipsis: true,
      render: (text) => (
        <Typography.Text ellipsis={{ tooltip: { getTooltipContainer: () => document.body 
       } }}>
          {text}
        </Typography.Text>
      ),
    },
    {
      title: 'col5',
      dataIndex: 'e',
      key: 'e',
      render: (text) => (
        <Typography.Text ellipsis={{ tooltip: { getTooltipContainer: () => document.body 
       } }}>
          {text}
        </Typography.Text>
      ),
    },

    {
      title: '操作',
      dataIndex: 'operate',
      key: 'operate',
      render: (_: any, record) => (
        <div>
          <Typography.Link
            style={{ cursor: 'pointer' }}
            onClick={e => {}}
          > 
            查看详情
          </Typography.Link>
        </div>
      ),
    },
  ]

 在ellipsis为true时设置

 <Typography.Text ellipsis={{ tooltip: { getTooltipContainer: () => document.body } }}>

          {text}

 </Typography.Text>

会显示两个悬浮展示，上边是Typography.Text的显示，下边是table自带的悬浮样式

 当不想让table自带的悬浮展示，同时防止table超出父元素宽度，可以设置showTitle：false，table自带的悬浮就不会展示出来

const columns = [
    {
      title: 'col1',
      dataIndex: 'a',
      key: 'a',
      ellipsis: {
        showTitle: false,
      },
      render: (text) => (
        <Typography.Text ellipsis={{ tooltip: { getTooltipContainer: () => document.body 
       } }}>
          {text}
        </Typography.Text>
      ),
    }
  ]

 over！！！