vue 項目 element-ui 表格 修改 表格裏面的數據後 頁面不更新問題 完美解決方案

vue 項目 element-ui 表格 修改 表格裏面的數據後 頁面不更新問題 完美解決方案

• 想要達到的效果：點擊"更多"後，"更多"隱藏，刪除和補倉顯示；（有時間可全部看完，沒時間直接看做法5）
• 嘗試用的方法：自己用 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：

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

• 可直接把以下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)); // 如果不轉化 頁面不生效
      console.log("轉化之後", this.tables);
    }
  }
};
</script>