Ant Design Table 单元格文字过长用省略号表示

1.先看效果图

2.话不多说，直接上代码：

const columns = [
      {
        title: '申请日期',
        align: 'left',
        width: '10%',
        dataIndex: 'SQRQ',
        key: 'SQRQ',
        ellipsis: true,
        render: (value, record) => {
          return (
              <div title={value} style={{ whiteSpace: 'nowrap', float: 'left', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                {value}
              div>
          );
        }
      },
      {
        title: '主题',
        align: 'center',
        width: '30%',
        dataIndex: 'ZT',
        key: 'ZT',
        render: (value, record) => {
          return (
            <div title={value} style={{ whiteSpace: 'nowrap', float: 'left', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis' }}>
              {value}
            div>
          );
        }
      },
      {
        title: '申请部门',
        align: 'left',
        width: '20%',
        dataIndex: 'SQBM',
        key: 'SQBM',
        render: (value, record) => {
          return (
            <div title={value} style={{ whiteSpace: 'nowrap', float: 'left', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis' }}>
              {value}
            div>
          );
        }
      },
      {
        title: '申请人',
        align: 'left',
        width: '10%',
        dataIndex: 'SQR',
        key: 'SQR',
        render: (value, record) => {
          return (
            <div title={value} style={{ whiteSpace: 'nowrap', float: 'left', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis' }}>
              {value}
            div>
          );
        }
      },
      {
        title: '流程类型',
        align: 'left',
        width: '20%',
        dataIndex: 'LCLX',
        key: 'LCLX',
        render: (value, record) => {
          return (
            <div title={value} style={{ whiteSpace: 'nowrap', float: 'left', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis' }}>
              {value}
            div>
          );
        }
      },
      {
        title: '流程状态',
        align: 'left',
        width: '10%',
        dataIndex: 'LCZT',
        key: 'LCZT',
        render: (value, record) => {
          return (
            <div title={value} style={{ whiteSpace: 'nowrap', float: 'left', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis' }}>
              {value}
            div>
          );
        }
      }];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

3.以下关键点要注意：

ellipsis设置成true ，那么表格就会变成fixed，不会被内容撑开，会一直按照自己定义的宽度。

同时要给要渲染的内容加上这三个关键样式：