antd table 宽度_Antd Table组件 配置规范

前言

开发的时候遇到了这样的几个问题：

左侧菜单收缩时出现行不对齐

某列数据过长挤压其他列，导致显示不美观

官方文档讲的较为模糊，网上也没有相应的配置文章，width的设置也较为随意，故把一些经验和实践进行了记录。

官方配置文档

定义：

column: antd中table的columns列表属性中的一项

column-width: column 的width属性

style-width: column render时祖先节点style的 width 属性

style-maxWidth: column render时祖先节点style的 maxWidth 属性

设置规则

一般来说，当列多于7列(经验值)或者某列的列数据长度不固定且可能很长，则需要根据下述规则来进行设置

style-width 值设置效果：数据超出其宽度可以折行显示，且有固定数据折行行数的效果保证组件行对齐

style-maxWidth 值设置效果：在style-width的优点上增加了一个自适应

配置fixed列，一般是 columnKey列和操作列。

非fixed的最后一列不设置column-width, 保证自适应；其余都设置column-width属性

当非fixed最后一列数据长度不固定时，设置style-maxWidth，避免Table组件拉大时，列数据行数变动导致组件行不对齐；

这里其实也可以将style-maxWidth改为style-width,因为该列是自适应的，不会出现style-width空占宽度的效果

column-width 的设置规则：需要根据列头和列数据来判断

4.1 当列数据长度固定时，取max(列头,列数据长度);

可以通过测量或者用公式计算：15 (中文字体个数)+12

(大写字母个数)+8*(小写字母或特殊字符个数)+28(有筛选)+14(有排序)+x(拓宽列，值为0+，一般是为了让最后结果可以整十再加上x)

注：列需要margin(margin:0 16px)，最后结果为上述值加上32

4.2 当列数据长度不固定时，取列头，同上最后结果需要加上32;

并设置 style-maxWidth 值，这里不设置style-width 是因为style-width会固定某个宽度，如果当页数据宽度较小时，该列占了很多空白空间，不能自适应，效果不好

该列数据显示长度就控制在[column-width,style-maxWidth]中，

需要设置scroll.x 值，具体值的计算如下：

let scrollX = 0

if(配置了rowSelection){

scrollX+=62 //多选框时，其占62px，30width+32margin

}

for(每一列){

if(该列仅设置column-width){

scrollX += column-width

} else {

// 该列值取三者的最大值，未设置则为0，style相关属性需要加上margin的32

scrollX += Math.max(column-width,style-width+32,style-maxWidth+32)

}

}

以上操作之后，就会得到一个好看的Table了

当Table组件的宽度小于scroll.x时就会出现滚动条。

我们有个原则，即在1920页面宽度尽量不出现滚动条，且最好是左侧菜单不收缩的情况下不出现滚动条。仅在小屏才显示

我们以以下一个例子讲述：

左侧菜单栏占256px,Table组件1530-15(总页面存在y滚动条)px,

scroll.x 最大应该为1515， 当大于这个数，就可能会出现滚动条

再多，左侧菜单栏收缩到只剩80px scroll.x 最大应该为 1691

若scroll.x计算值较大，则考虑看能不能继续压缩每一列的宽度或采用其他展现方式(Tooltip)=，=