vue el-table 数据为二维数组或多维数组时数据不同步更新问题解决办法

最新推荐文章于 2025-10-23 18:24:45 发布

原创

最新推荐文章于 2025-10-23 18:24:45 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

问题简介

实际开发中遇到一个需求，需要一个表格，动态表头，动态第一列，其他列内容为当前列是否被选中过。

当时开发时没多想，直接用el-table，动态表头和动态第一列不难实现，其他列内容直接建了一个dataList[x][y]来保存，因为只需要注意是否被选中，直接用0和1即可。

但是debug时发现点击事件虽然成功改变了dataList的值，但并未触发vue的同步刷新事件。

解决过程

上网上找了一下解决办法，有以下三种

1.this.$forceUpdate()

作用是直接强制重新渲染页面，但是在这个问题上并没有起到效果，体现为运行语句前后页面无变化

2.给el-table绑定动态key，数据更新后赋值一个新key，来触发刷新

//页面部分
<el-table
              :data="subjectList"
              style="width: 100%"
              border              
              :key="itemkey"
              @cell-click="cellClick"
            >

....
</el-table>


//cellClick方法部分
 cellClick(row, column) {
     if (column.index == undefined) return
     this.dataList[row.index][column.index] =
        1 - this.dataList[row.index][column.index]

    //部分业务代码省略
    //更改key来强制刷新列表
    this.itemkey=Math.Random();
}

这种方法确实可以刷新表格，但是也有问题：每次调用的时候会强制刷新整个表格，而这个表格本身因为有可能列数较多本身是做了横向滚动