Antd Table组件 配置规范

前言

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

1. 左侧菜单收缩时出现行不对齐
2. 某列数据过长挤压其他列，导致显示不美观

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

官方配置文档

https://ant.design/components/table-cn/

定义：

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的优点上增加了一个自适应

1. 配置fixed列，一般是 columnKey列和操作列。
2. 非fixed的最后一列不设置column-width, 保证自适应；其余都设置column-width属性
3. 当非fixed最后一列数据长度不固定时，设置style-maxWidth，避免Table组件拉大时，列数据行数变动导致组件行不对齐；

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

4. 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]中，

5. 需要设置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）=，=