vue2使用element-ui的el-table嵌套el-checkbox时，点击复选框data修改但是页面不进行响应式更新。

问题描述

vue2使用element-ui的el-table嵌套el-checkbox时，点击复选框data修改但是页面不进行响应式更新。

---

原因分析：

我是由于使用异步数据，数据加载进来还需要进行一次修改，把所有是否添加都设置为false，根据后续用户的选择进行修改。这样直接遍历修改值无法触发响应式更新，原因应该和数据下标直接修改数据类似。

this.usrList.forEach(ele => ele.add=false)
// template
<el-table-column  label="是否加入" >
    <template slot-scope="scope">
        <el-checkbox v-model="scope.row.add" @click="checkUSrList" ></el-checkbox>
    </template>
</el-table-column>

---

解决方案：

深拷贝下原来数据，将修改好的数据直接赋值。

    let arr = JSON.parse(JSON.stringify(this.usrList))
    arr.forEach(ele => ele.add=false)
    this.usrList = arr