vue Element UI 解决表格数据不更新问题及解决方案

this.$set(this.tableData, index, newData);  // 使用 Vue.set 修改数组中的对象

data() {
  return {
    tableData: [
      { id: 1, name: 'John', age: 25 },
      // 确保所有可能用到的属性在初始化时已经定义
    ]
  };
}

<template>
  <el-table :data="tableData" :key="tableKey">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
  </el-table>
  <button @click="updateData">Update Data</button>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'John', age: 25 },
      ],
      tableKey: 0  // 用于强制重新渲染的 key
    };
  },
  methods: {
    updateData() {
      // 更新数据后改变 key
      this.tableData = [...this.tableData, { id: 2, name: 'Jane', age: 30 }];
      this.tableKey += 1;
    }
  }
}
</script>

watch: {
  tableData: {
    handler(newVal, oldVal) {
      console.log('Table data updated:', newVal);
      // 可以在这里做一些额外的处理
    },
    deep: true,  // 深度监听
    immediate: true  // 立即执行一次监听器
  }
}

computed: {
  formattedTableData() {
    // 在这里进行数据处理
    return this.tableData.map(item => ({
      ...item,
      ageGroup: this.getAgeGroup(item.age)
    }));
  }
},
methods: {
  getAgeGroup(age) {
    if (age < 18) return 'Minor';
    if (age < 65) return 'Adult';
    return 'Senior';
  }
}

<el-table :data="formattedTableData">
  <el-table-column prop="name" label="Name"></el-table-column>
  <el-table-column prop="ageGroup" label="Age Group"></el-table-column>
</el-table>