关于el-table 表头数据变化后,表头不重新渲染问题

问题描述:利用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样式重置的问题。

缺点:数据列过多,会引起大量的重绘操作。

若有更好的方案希望大佬们能分享出来。大家一起学习学习

  • 19
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
为了在el-table表头中使用el-popover,您需要为每个popover绑定一个独特的变量。以下是一个例子,展示了如何在el-table表头中使用el-popover: ```html <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> <template slot="header"> <div> 日期 <el-popover placement="bottom" width="200" trigger="hover" v-model="popoverVisible1" > <p>这是一个日期选择器</p> <el-date-picker v-model="date" type="date" placeholder="选择日期"></el-date-picker> </el-popover> <el-button slot="reference" icon="el-icon-question" size="mini" @click="popoverVisible1 = true" ></el-button> </div> </template> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> <template slot="header"> <div> 姓名 <el-popover placement="bottom" width="200" trigger="hover" v-model="popoverVisible2" > <p>这是一个输入框</p> <el-input v-model="name" placeholder="请输入姓名"></el-input> </el-popover> <el-button slot="reference" icon="el-icon-question" size="mini" @click="popoverVisible2 = true" ></el-button> </div> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { date: '2022-01-01', name: '张三' }, { date: '2022-01-02', name: '李四' }, { date: '2022-01-03', name: '王五' } ], popoverVisible1: false, popoverVisible2: false, date: '', name: '' }; } }; </script> ``` 在这个例子中,我们为每个el-popover绑定了一个独特的变量(popoverVisible1和popoverVisible2),这样每个popover就可以正常渲染了。同时,我们还为每个popover添加了一个el-button,当用户将鼠标悬停在这个按钮上时,popover就会显示出来。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值