一般 antd Table columns 比较多的时候,我们会使用 fixed 属性来固定列,但是在使用的时候发现,fixed 属性不生效,这是为什么呢?

如下,我们使用了 fixed 属性,但是并没有生效。

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
const dataSource = [
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
];

const columns = [
{
title: '姓名',
dataIndex: 'name',
fixed: 'left',
key: 'name',
},
{
title: '住址',
dataIndex: 'address',
ellipsis: true,
key: 'address',
},
{
title: '住址',
dataIndex: 'address',
width: '100',
key: 'address',
},
{
title: '住址',
dataIndex: 'address',
width: '100',
key: 'address',
},
{
title: '住址',
dataIndex: 'address',
width: '100',
key: 'address',
},
{
title: '住址',
dataIndex: 'address',
width: '100',
key: 'address',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
fixed: 'right'
},
];

<Table dataSource={dataSource} columns={columns} />;

代码里有两处使用了 fixed 属性,一处是在第一列,一处是在最后一列,但是并没有生效。原因是有配置项设置了 ellipsiswidth,这两个属性删除后,就可以表现正常了。