问题描述:利用el-table实现拖拽列时,表头数据改变,但表头未重新渲染
排查了很久,后发现:在自定义表头的时候,由于是用的v-for循环生成的,因此会给每个循环体一个固定的key,导致数据频繁异步更新时,因为这个key没有变,所以el-table觉得表头数据是没有变化的,因此就只更新了整体表格数据、key值有变化的列的表头。
解决方案:
补充:
关于排序后,表头排序icon样式重置问题的解答:
先说下原理,用为key值的更新会导致表格重绘,因为没有记录sort排序的结果,重绘会将改变后的状态重置为初始状态,所以得记录重绘前的sort排序结果。
以下方法只适用于elementui的table组件:
将每次改变后的sort排序结果记录在sortObj中,拖拽排序后,将mykey赋随机值,使表格重绘(重绘后需重新挂载拖拽监听事件)。
//为table添加default-sort、@sort-change 以及 key 属性
<el-table ...其它属性 :default-sort="sortObj" @sort-change="handleChange" :key="mykey"></el-table>
//将el-table-column key属性值改为index
<el-table-column ...其它属性 v-for="(item, index) in columnList" :key="index"></el-table-column>
//data中新增sortObj与mykey属性
data() {
return {
...
sortObj: {},
mykey: "",
};
}
//methods中新增一方法
handleChange({ column, prop, order }) {
this.sortObj = {
prop,
order,
};
},
//每次拖拽结束时调用
reDrawTable() {
this.mykey = Math.random();
// 重新挂载拖拽监听
this.$nextTick(() => {
this.columnDrop();
this.rowDrop();
});
},
总结:此方法可解决重绘引起的表头抖动以及表头排序icon样式重置的问题。
缺点:数据列过多,会引起大量的重绘操作。
若有更好的方案希望大佬们能分享出来。大家一起学习学习