el-table表头宽度拖动,列出现空白
el-table在进行表头列宽改变时,列会出现空白的情况,排查了发现是因为拖动改变宽度时,左侧固定列的宽度没有跟着变化,导致布局出现问题。
解决办法:通过计算改变后的宽度进行重新赋值。
@header-dragend="headerDragend"
//拖动表格头部
headerDragend (newWidth, oldWidth, { fixed }) {
// 拖拽固定列需要计算改变固定区域的宽度
if (String(fixed) !== 'false') {
const widthStr = document.querySelector('.el-table__fixed').style.width
const width = widthStr.slice(0, widthStr.length - 2)
const timer = setTimeout(() => {
document.querySelector('.el-table__fixed').style.width = (Number(width) + newWidth - oldWidth) + 'px'
clearTimeout(timer)
})
}
this.$nextTick(() => {
this.$refs.multipleTable.doLayout()
})
}