vue+elementUI表格数据修改，表格消失

Question

新人学习vue+elementUI的时候，做一个简单的增删改查，每次表格里data的数据改了，之前的表格就会消失，麻烦路过大佬给看一下问题

<div id="test">
  <div>
    <el-table id="tab" :data="data.filter(data => !search  || data.Name.toLowerCase().includes(search .toLowerCase()))" style="width: 100%">
      <el-table-column label="姓名" prop="Name" width="180"></el-table-column>
      <el-table-column label="年龄" prop="Age" width="180"></el-table-column>
      <el-table-column label="毕业学校" prop="School" width="180"></el-table-column>
      <el-table-column label="备注" prop="Remark" width="180"></el-table-column>
      <el-table-column
        align="right">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search "
            size="180"
            placeholder="输入姓名进行搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button type="success" @click="Edit(scope.row)">编辑</el-button><el-button @click="Delete(scope.row.Id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</div>
  <div id="row">
    <div>
      <el-input v-model="savData.Name" placeholder="姓名"/>
    </div>
    <div>
      <el-input v-model="savData.Age" placeholder="年龄"/>
    </div>
    <div>
      <el-select v-model="savData.School">
        <el-option label="杨村第一小学" value="杨村第一小学"></el-option>
        <el-option label="杨村第二小学" value="杨村第二小学"></el-option>
        <el-option label="杨村第三小学" value="杨村第三小学"></el-option>
      </el-select>
    </div>
    <div>
      <el-input v-model="savData.Remark" placeholder="备注"/>
    </div>
    <div>
      <el-button type="success" @click="Save">保存</el-button>
    </div>
  </div>
    var vue = new Vue({
    el: '#test',
    data: data,
    methods: {//监听方法
      Change:function(){
        console.log(this.data)
      },
      Delete: function (id) {
        console.log(id)
        for (var i=0;i<this.data.length;i++){
          if (this.data[i].Id == id) {
            this.data.splice(i, 1);//从哪个数据开始到之后几条数据删除
            this.rowsSave.splice(i,1);
            break;
          }
        }
      },
      Edit: function (row) {
        console.log(3)
        rowSadta.savData = row;
      },
      //上一页方法
      PrePage: function (event) {
        console.log(4)
        $(".pagination .active").prev().trigger("click");
      },
      //下一页方法
      NextPage: function (event) {
        console.log(5)
        $(".pagination .active").next().trigger("click");
      },
      //点击页码的方法
      NumPage: function (num, event) {
        console.log(6)
        if (this.curpage == num) {
          return;
        }
        this.curpage = num;
        $(".pagination li").removeClass("active");
        if (event.target.tagName.toUpperCase() == "LI") {
          $(event.target).addClass("active");
        }
        else {
          $(event.target).parent().addClass("active");
        }
        if (this.curpage == 1) {
          $("#prepage").addClass("disabled");
        }
        else {
          $("#prepage").removeClass("disabled");
        }
        if (this.curpage == Math.ceil(this.data.length / this.pagesize)) {
          $("#nextpage").addClass("disabled");
        }
        else {
          $("#nextpage").removeClass("disabled");
        }
      },

    }
  });

Answer 1

参考GPT和自己的思路：

根据你提供的代码，可能是由于修改数据后没有正确更新表格的原因导致的。你可以增加一个 watch 来监听 data 对象的变化，使用 this.$nextTick() 来确保更新后再刷新表格，代码如下：

var vue = new Vue({
  el: '#test',
  data: data,
  watch: {
    data: function (newData) {
      this.$nextTick(function () {
        // 刷新表格
        this.$refs.table.$emit('update:default-sort', undefined);
      });
    }
  },
  methods: {
    // ...其他方法
  }
});

这里，我们使用 $refs 属性来代表表格，通过 $emit 来触发 update:default-sort 事件来刷新表格，从而解决表格消失的问题。