element-ui 表格 修改後 表格裏面的數據後 頁面不實時更新問題 完美解

element-ui 表格 修改後 表格裏面的數據後 頁面不實時更新問題 完美解

• 想要達到的效果：點擊"更多"後，"更多"隱藏，刪除和補倉顯示；（有時間可全部看完，沒時間直接看做法6/7）
• 嘗試用的方法：自己用 this.show、在百度上找的方法 set 都沒能成功
• 提示：最下面有代碼demo

頁面初始化：

目標效果

做法1：

給"更多"綁定一個 v-show='show' 把 this.show 設置爲true ，點擊"更多"按鈕後 在點擊事件裏面把this.show 設置爲false；

結果1：

未成功，點擊一個"更多"，其他所有的"更多"都隱藏起來了

原因1：

循環的時候show給了表格所有的行，所以點擊一個"更多"導致所有的"更多"都隱藏了；

做法2：

給"更多"綁定一個v-show='(scope.$index+1)'，理想狀態是：索引最低是0，+1後，至少也爲1,所以顯示，給刪除和補倉設置爲 v-show='!(scope.$index+1)' 取反就是隱藏了；

結果2：

未成功，報錯

做法3：

當取到表格的data數據後，循環給數據一個flag =true ，在賦值給表格，點擊"更多"後把當前的行索引拿到 ，把當前行的 this.tables[index].flag = false設置爲false；

結果3

未成功，點擊第一個 “更多"可以 隱藏"更多”，顯示 刪除、補倉， 出現問題：在點擊其他行的"更多"就不能正常顯示和隱藏，還是有問題

做法4：

百度到的結果：用set方法，當取到表格的data數據後，循環給數據一個flag =true ，在賦值給表格，點擊"更多"後把當前的行索引拿到 ，把當前行的 this.tables[index].flag = false設置爲false； 並 設置：this.$set(this.tables);

結果4

未成功，結果是點擊第一個"更多"可以改變，點擊其他的"更多"還是改變不了；

做法5：

把當前行的 this.tables[index].flag = false設置爲false；然後在把 表格的數據 用 JSON this.tables = JSON.parse(JSON.stringify(this.tables)); 值重新克隆一遍 再賦值給表格就OK了

結果5：

成功(有缺陷)， 如果只有 new Date的話 轉化就會有問題

做法5的缺陷：

如果有 new Date的話，轉化就會有問題 (會把new Date轉化成 字符串)

做法6：

使用 JSON.parse(JSON.stringify(this.tables)) 也可行，但是怎麼能止步於此呢，賦值給tables表格的原理是深拷貝，那麼我還能這樣 this.tables = this.tables.filter(item => item); ，把每一項重新 復賦值給 this.tales ；

結果

成功， 所有的表格項可以正常隱藏 和顯示

做法6 完美解決了缺陷

做法7： Object.assign

直接使用es6的 Object.assign複製一個新的對象 this.tables = Object.assign([],this.tables) 少去了過濾循環的麻煩 簡單明瞭

結果

成功， 所有的表格項可以正常隱藏 和顯示

以下demo代碼可複製到新的vue文件裏面直接查看，點擊查看效果

<template>
    <div>
    
        <hr />
        <el-button @click="showTable">顯示錶格</el-button>
        <el-table :data.sync="tables" style="width: 100%">
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
              <el-button type="info" size="small">編輯</el-button>
              <el-button
                type="primary"
                size="small"
                v-show="scope.row.flag"
                @click="more(scope.$index,scope.row)"
              >更多</el-button>
              <div v-show="!scope.row.flag">
                <el-button type="danger" size="small">刪除</el-button>
                <el-button type="success" size="small">補倉</el-button>
              </div>
</template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
    data() {
        return {
            tables: [],
            getList: [{
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀區金沙江路 1518 弄111",
                },
                {
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "上海市普陀區金沙江路 1517 弄222",
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀區金沙江路 1519 弄333",
                },
                {
                    date: "2016-05-03",
                    name: "王小虎",
                    address: "上海市普陀區金沙江路 1516 弄444",
                }
            ]
        };
    },
    watch: {},
    methods: {
        showTable() {
            // this.getList 表示請求到的數據
            // this.tables 表格 data
            if (this.getList.length > 0) {
                this.getList.forEach(val => {
                    val.flag = true;
                });
            }
            this.tables = this.getList;
        },
        more(index, val) {
            console.log("更多", index, val);
            this.tables[index].flag = false;
            // this.tables = JSON.parse(JSON.stringify(this.tables)); // 如果不轉化 頁面不生效
            this.tables = Object.assign([],this.tables) // 賦值一個新的對象
            // this.tables = this.tables.filter(item => item);
            console.log("轉化之後", this.tables);
        }
    }
};
</script>