【vue】el-table 数据更新后，刷新表格数据

在Vue中，如果你使用的是Element UI库中的el-table组件，并且需要在数据更新后刷新表格数据，你可以通过改变绑定到el-table的数据属性来实现。

假设你的表格数据绑定到了一个名为tableData的变量上，你可以通过更新这个变量来刷新表格。

// 假设你的组件中有如下数据定义
data() {
  return {
    tableData: []
  };
},
 
// 假设你有一个方法用来获取新的数据
methods: {
  updateTableData() {
    // 这里调用API或其他逻辑来获取新的数据
    this.tableData = getNewData(); // 假设getNewData是一个返回新数组的函数
  }
}

当你需要更新表格数据时，只需调用updateTableData方法：

// 在你需要的时候调用
this.updateTableData();

Vue会自动检测到tableData的变化，并且更新el-table中显示的数据。

如果你想要确保表格在数据更新后重新渲染，你可以使用Vue的key属性来强制Vue重新渲染整个表格。这可以通过为el-table-column添加一个唯一的:key来实现：

<el-table :data="tableData" :key="tableKey">
  <el-table-column prop="date" label="日期" width="180"></el-table-column>
  <!-- 其他列 -->
</el-table>

// 在组件的data中添加tableKey
data() {
  return {
    tableData: [],
    tableKey: 0
  };
},
 
// 在更新数据之前改变tableKey的值
methods: {
  updateTableData() {
    this.tableKey += 1; // 每次更新数据时，改变tableKey的值
    this.tableData = getNewData();
  }
}

这样，每次你调用updateTableData方法，Vue都会认为表格的数据和结构都发生了变化，从而触发重新渲染。