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

问题简介

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

当时开发时没多想，直接用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();
}

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

3.通过Vue.set(object,index,value)刷新数据

//其他代码省略
 this.dataList[row.index][column.index] =
       1 - this.dataList[row.index][column.index]

 //在修改了列表后动态刷新数据
 Vue.set(this.dataList,row.index,this.dataList[row.index]);

最终这种方法完美的解决了问题，跟正常情况一样在数值发生变化后页面同步刷新了

原因分析

在通过3方法成功刷新数据后，我也想明白了该问题如何产生的：vue在监视数据的时候针对数组是监视的数组数值变动，但对于类似dataList[x][y]这样的数组，它监视的是dataList[x]的值是否有变化，这里的值其实是一堆数组，在你针对二维数组内部的值修改的时候，dataList[x]的值是不变的，自然无法触发vue针对数据改动更新的操作。我怀疑this.$forceUpdate()不生效也是同样的原因。

绑定动态key并更改key以后，浏览器会重新绘制整个el-table并进行计算，这是使用key的方式能刷新的原因。但也是因为改key会重绘el-table，导致横向滚动会被重置，降低了用户体验。