Antd Table组件 配置规范

前端技巧,大前端 2019-03-09 340 次浏览 次点赞

前言

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

  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*(小写字母或特殊字符个数)+14(有筛选)+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)=,=

优化:如何在大屏的时候将 overflow:scroll 去掉

多了一个滚动条(即使不能滚动),不美观,能动态获取页面size并进行scroll.x的设置与否不?


本文由 GaHingZ 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

如果对您有用,您的支持将鼓励我继续创作!