今天制作表格新增列时,发现表头在动态添加列时疯狂抖动。
在网上查了下,发现可以用element ui中自带的方法( doLayout )解决:
watch: {
// 处理table抖动问题
dataList: {
handler(val) {
this.$nextTick(() => {
if(this.$refs.table1) {
this.$refs.table1.doLayout();
}
})
},
deep: true,
},
}
然而,我发现table中设定固定的列(fixed)仍然存在抖动问题。
方法1:在网上查了下,也是table重新计算导致的。可以通过写死cell高度解决问题。(不生效样式穿透下)
.el-table .cell{
height: 28px !important;
}
然而,这时你会发现问题虽然解决了,但是cell的高度被限制住了。所以说在部分情况下仍然不妥当。
方法2:经过研究发现是一个相应的标签top变化导致的。
可以对其进行更改:
::v-deep .el-table__fixed-body-wrapper {
top: 40px !important;
}
然后问题解决了。
DLC补充:
上述的第二种方法会导致一个可能出现的问题,就是当表头的内容很长且没有任何限制,超出一行时。这里写死的top可能不合适。因此需要获取除设定fixed外的其他的表头height来决定top的值。
这里我想到了一个方法(后续有更好方法会有补充),就是css表达式动态获取并赋值。
1.首先先定义一个css表达式变量在root中,可以预设定一个默认值:
:root {
--table-head-height: 40px;
}
2.将该值赋到目标上:
:deep(.el-table__fixed-body-wrapper) {
/* top: 40px; */
top: var(--table-head-height) !important;
}
3.定义一个方法来获取表头高度(这里笔者给el-table设定的类名为table1)并赋值给css变量。
headerChanged() {
window.setTimeout(() => {
let aimDom = document.querySelector('.table1 .el-table__header')
let aimHeight = window.getComputedStyle(aimDom).height
document.documentElement.style.setProperty('--table-head-height', aimHeight);
},100)
}
4.在可能触发表头高度变化的地方调用该方法。(如拉伸表头,可导致标题变更的方法,甚至有可能是mounted或监听中等)
<el-table
ref = 'table1'
class= "table1"
:data="MesTableData"
border
@header-dragend="headerChanged"
>
然后,遇到触发表头高度变更的情况时,只要触发该方法就可以动态变化top值了。
希望本文会对你有所帮助 ^_^