最近在做表格可伸缩列的功能的时候,刚开始不知道从什么地方下手。意外看到,ant-design-vue的表格可以直接支持这个功能,遂大喜,想着这不是手到擒来,原计划一天的功能,我这两分钟搞定,不是就又可以“学习”一天减两分钟了嘛。 可谁知,却出了岔子,当我兴致勃勃的弄好提侧,却被测试问候了。
测试:这个表格可伸缩列的功能实现的有问题。
我据理力争:不可能,绝对不可能,这是官网实现的功能,有案例为证,怎么可能有问题,定是你测试操作不当,亦或是你的电脑有问题。
测试:这是我操作的视频,你自己看吧。
我:这个...我去瞧瞧
我立马把项目启动起来一看,果然有问题, 经过我一番操作,我发现,当我们设置的表格列的宽度大于等于表格的宽度的时候,就不会出现这个问题。
可是当我们的表格列设置的宽度小于表格的宽度的时候,就会出现这个问题。 主要的原因就是,当我们的表格列的宽度小于表格的宽度的时候,每一列的宽度就会按比例平分表格的宽度。 例如,我们的表格的宽度是1904,当我们设置列的宽度为100,有两列,100 + 100 = 200,小于1904,每一列按比例评分宽度,我们每一列的实际宽度就是1904/2 = 952 当我们伸缩列的时候,第一列的宽度就变成了950,第二列的宽度依旧是100,这时候952+100 = 1052,依旧小于1904,每一列按比例平分宽度,第一列就变成了1904 / 1052 * 952 = 1723,第二列的宽度就变成了1904 / 1052 * 100 = 181
解决办法:我们在设置column的时候,先计算表格的宽度,再去动态的计算每一列应该占据的宽度, 就是tableWidth / columns.length