Vue + iview-ui 遇到 iview内的table没有原生table那种列宽自适应功能,在iview table API中并没有找到自适应的接口
table.png
同样，Element table虽然拥有 fit 这个属性但是使用上并没发现有任何作用，在Element官方github上
issue #4159 大部分人讨论方向都是通过遍历计算每列最大宽度，但是当数据多的时候性能会受到影响。
后来官方关掉了这个票，需要开发人员自行解决。
noResult.jpg
不管是Element还是iview 针对table的封装，都会自动加入colgroup col 标签,并且对table加上table-layout: fixed已达到固定列宽的功能，反之若没有这两个条件，那么table自然就和原生table一样拥有自适应列宽的功能。
- 从css角度上 把colgroup col标签要屏蔽掉并且table 的table-layout: fixed css属性还原成auto就达到了列宽自适应的功能。
<Table
id="devStepTaskList"
class="auto-column-size-table"
ref="autoTable"
:data="data"
maxHeight="220"
></Table>
.auto-column-size-table table {
table-layout: auto;
}
.auto-column-size-table table colgroup col {
display: none;
}
加上这两个css后table便可以自适应列宽了，需要的话可以再加上个列最小宽度，防止空值情况表头被挤。
- 但是 由于某些复杂功能的原因 iview和Element的 table的构建表头thead 和tbody是分开的两个table，所以会出现自适应宽度头身不等情况。有一种处理方法是在tbody自适应后的每一列宽度赋给表头thead的th上，具体如下
//直接取第一行的就行，因为每一行列宽都一样
let tableDom = document.getElementById('devStepTaskList')
let tds = tableDom.getElementsByClassName('ivu-table-row')[0].children
let ths = tableDom.getElementsByTagName('th')
let tdArr = []
// 这里为了方便理解直接for循环处理
for (let i = 0; i < tds.length; i++) {
tdArr.push(tds[i].offsetWidth) // 把每一列循环到的width存入数组里
}
for (let i = 0; i < ths.length; i++) {
ths[i].style.width = tdArr[i] + 'px' // 直接宽度赋值
}
现在表现一致了，重点是dom取值找准了就行，代码里用的iviewUI，Element处理同理找这个tr.el-table__row
具体找子集可能有区别，但是核心都是找到td的offsetWidth赋给th的width。
- 这时还有个问题，如果设置最大高度，出现滚动条的话又会出现头尾对不齐的状态，所以要先把tbody内的table宽度减去滚动条宽度再进行上述赋值操作。注意是tbody内的table
let tableDom = document.getElementById('devStepTaskList')
if (this.data.length > 5) { // data.length 数据量大于最大显示数据量，出现滚动条条件
let tables = tableDom.getElementsByClassName('ivu-table-body')
let table = tables[0].children[0]
table.style.width = table.offsetWidth - 17 + 'px' // 减去滚动条宽度
}
let tds = tableDom.getElementsByClassName('ivu-table-row')[0].children
let ths = tableDom.getElementsByTagName('th')
let tdArr = []
for (let i = 0; i < tds.length; i++) {
tdArr.push(tds[i].offsetWidth)
}
for (let i = 0; i < ths.length; i++) {
ths[i].style.width = tdArr[i] + 'px'
}
- 最后，这部分处理首先在watch data时触发，防止后续增删改导致的宽度变动
watch: {
data: function (newVal, oldVal) {
this.$nextTick(() => {
// 上述代码
})
}
},
可以的话在共同函数进行封装，需要表格的地方进行调用。
然后需要监听窗口变动window.resize导致的表格宽度变化
window.addEventListener('resize', this.listenTableColumnResize) // 上述代码封装后的函数，可以在setTimeout执行
网上的方法大都是计算宽度再进行赋值，感觉像官方人员说的，不应该舍近求远。所以这里列宽自适应主要就两句css,剩下都是为了对齐。
authorAns.jpg
网上并没看到类似的答案，所以这里提出了一种思路。
希望能帮到遇到同样的问题的人
网友评论