Iview: Table组件设置高度后在无数据时thead显示异常

Created on 12 Apr 2017  ·  3Comments  ·  Source: iview/iview



iView 版本号

2.0.0-rc.10

操作系统/浏览器 版本号

Microsoft Windows [版本 6.1.7600]
Chrome 53.0.2785.116 m

Vue 版本号

2.2.2

能够复现问题的在线示例(重要)



暂未创建

复现步骤

Table组件,设置columns、height、stripe、border,但是data保持无数据,保证显示暂无数据。

问题现象,以及你期望的结果是怎样的?

问题现象:thead的最后一列的宽度理论上应该是实际宽度+滚动条宽度,但是实际上因为此时无数据被设置为滚动条宽度,导致无法显示thead上最后一列的内容。
期望结果:无数据时,此时理论上不会存在滚动条,thead的最后一列的宽度为实际宽度,保证thead的正确显示。退一步来说,thead最后一列的宽度也应该是实际宽度+滚动条宽度。

你估计可能的原因是什么(选填)?

Table组件中mixin.js中的setCellWidth函数中的一个条件改为if (this.columns.length === index + 1 && top && this.$parent.bodyHeight !== 0 && this.$parent.data.length > 0),即最后加上对于当前有无数据的判断。

Most helpful comment

所以我把height设置了变量,判断如果table的data为0,height设置为0,就没有问题了!

All 3 comments

应该是用this.$parent.rebuildData.length > 0这个去判断,即修改为if (this.columns.length === index + 1 && top && this.$parent.bodyHeight !== 0 && this.$parent.rebuildData.length > 0)

我也遇到这个问题,就是表头的最后一列在没有数据的时候无法显示

所以我把height设置了变量,判断如果table的data为0,height设置为0,就没有问题了!

Was this page helpful?
0 / 5 - 0 ratings