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>