前言
开发的时候遇到了这样的几个问题:
左侧菜单收缩时出现行不对齐
某列数据过长挤压其他列,导致显示不美观
官方文档讲的较为模糊,网上也没有相应的配置文章,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)=,=