element table 数据改变列表更新

多选行，点击修改，指定列可以编辑。

解决 element table 数据改变之后列表不更新的问题

我们定义一个 table 的 key， 当我们改变数据的时候直接赋予一个随机值

这句代码写在你的逻辑处理层

业务：

点击修改 --> 选中的行，动态修改表格。

重新选中已经选中的行。

 // 修改按钮
    modifyBtnClick() {

      if(this.multipleSelection.length===0) {
        this.$message({
          message: '至少选中一行数据进行修改操作',
          type: 'warning'
        });
        return false
      }

      // 遍历选中数据
      for (const data of this.multipleSelection) {
        for(let i = 0; i<this.tableData.length ; i++){
          if(data.id === this.tableData[i].id){
            this.tableData[i].isEdit = true
          }
        }
      }

      // 赋予随机数，让表格刷新
      this.mainTableKey = Math.random()

      // DOM 更新 之后再执行
      this.$nextTick(() => {
        // 刷新表格之后: 重新选上复选框
        for(let i = 0; i<this.tableData.length ; i++){
          if(this.tableData[i].isEdit) {
            this.$refs.multipleTable.toggleRowSelection(this.tableData[i]);
          }
        }

      });


    },

export default {
  data() {
    return {
		tableData: [],
		// 定义此变量用来控制，数据变化后赋予新得随机数
     	mainTableKey: 1
	}
}

 <el-table
      :key="mainTableKey"
      :data="tableData"
      style="width: 100%"
      size="mini"
      border
      ref="multipleTable"
    >
	<el-table-column
        prop="orderDate"
        label="订单日期"
        width="148px"
      >
        <!-- 可编辑表格, 直接使用数据驱动 isEdit 赋予此值为 true -->
        <template slot-scope="scope">
          <span v-if="scope.row.isEdit">
            <el-date-picker
              style=" width: 135px;"
              v-model="scope.row.orderDate"
              type="date"
              placeholder="选择日期">
              </el-date-picker>
          </span>
          <span v-else>{{scope.row.orderDate}}</span>
        </template>
      </el-table-column>

</el-table>