上篇文章里讲到了封装一个可增减数据项的table组件,还提到了当数据项很多的时候,为了防止自适应导致表头文字受挤压,可以根据文字在浏览器中渲染后的实际宽度设置宽度,以保证文字不受挤压,当数据项多的时候用滚动条展示。
所以这篇文章介绍设置table每项数据的宽度:
ajustmentTableHeader()
首先用document.getElementsByClassName( 'ant-table-thead' )获取到所有的table
再用getElementByTagName( 'tr' )获取到每个table的每一行表头(可能有两行表头,所以不能简单地用getElementByTagName( 'tr' ).[ 0 ]解决)
将第一行表头中的每项th和columns(表格列的配置描述),m(页面中第几个table)传入函数ajustmentEveryTableHeader
如果表头有两行,将第二行表头中的每项th和columns中含有子节点的节点的子节点(这里有点绕,意思就是判断出columns配置描述中哪些有子节点,然后把他们的子节点挨个儿传入函数),m(页面中第几个table)传入函数ajustmentEveryTableHeader
ajustmentEveryTableHeader()
由于表头文字位于每个th下的div中,
所以,遍历th数组,并获取到每个th下的div
我们需要获取到表头文字在浏览器中渲染后的字体、字号、文本内容、是否加粗,将这些内容设置在一个凭空创建的span元素上,再将这个元素添加进table尾部,然后获取到这个span元素中文本的实际宽度,最后将获取到的实际宽度realWidth设置在对应th下的div样式里
if ( columns.find( item => item.title === text ) )
这一步的目的是:如果页面中有多个table,可我们需要看到的不一定是全部table时(比如页面是tab模式,每个tab中都有table,切换tab时虽然只看到一个table,实际页面中存在着多个table)。我们如果对每个table都通过操作DOM的方式修改width,会对性能造成很大的影响,而columns通常是切换到table后,渲染当前table的columns,配置描述是会变化的,所以用来判断获取到的div文本是否和当前table的表头文字一致:若一致,操作DOM修改width,否则不做任何操作
这一步的目的是:window.getComputedStyle这个方法获取到的width有三种可能
display为inline:width为auto
display为block:width为元素宽度
display为inline-block:width为元素内容的宽度
最后,移除span:table.removeChild( span );
当做什么都没有发生过,只是修改了div的宽度
在两个生命周期中调用修改width的函数,一个是componentDidMount,安装组件后立即调用,另一个是componentDidUpdate,发生更新时调用,并且加上checkedKeys值发生改变时调用的条件(否则增减数据项的时候,新增的数据项表头宽度不会发生变化,仍然是挤在一起的)
表头没有设置宽度的表格:
表头设置了宽度的表格:
领取专属 10元无门槛券
私享最新 技术干货