iview 在折叠板Collapse中使用表格Table时,宽度显示不正常的解决办法

1,180 阅读1分钟

解决方法:给表格的column的每一列都设置宽度

预期效果

image.png

问题展示

image.png

问题复现

需求是展示分发任务的进度,每3秒请求一次刷新进度,先展开一条数据再折叠,在轮询得到新数据后,再展开这条数据就会出现这个问题。

原因分析

表格更新时,同时会更新样式用于自适应,先会获取整个表格的宽度,再给每一列分配。而折叠后表格的父元素隐藏,表格总宽度就变成1px了,样式就错乱了。

解决方法

给column的每一列设置宽度。 每一列都有宽度后就不需要自适应,也就没有总宽度的问题;

clientDetailcolumns: [
          {
              title: '销售人员',
              key: 'salerName',
              align: 'center',
              width: 340,
          },
          {
              title: '进度',
              key: 'step',
              align: 'center',
              width: 340,
          }
    ]

iview最坑爹的就是你设置表格的width是没用的,他获取的宽度是表格的父元素的宽度。