彻底解决vue+element多选分页表格默认勾选回显数据丢失问题

2023-01-18 14:11:48

解决 Element-UI Table 组件中多选分页表格默认勾选数据丢失的问题

什么是 Element-UI Table 组件的默认勾选数据丢失问题？

Element-UI Table 组件是一个用于显示和操作表格数据的 Vue.js 组件。当您在表中使用多选分页功能时，您可能会遇到一个问题，即在回显默认勾选数据时数据会丢失。这是由于 Element-UI Table 组件在分页时会重新渲染当前页的数据，导致默认勾选的数据丢失。

如何解决此问题？

解决此问题的关键在于手动重新勾选默认勾选的数据。您可以在 mounted 生命周期函数中执行此操作：

mounted() {
  this.$nextTick(() => {
    this.selectedRows = this.defaultSelectedRows;
  });
}

通过此解决方案，即使在分页时，您也可以保留默认勾选的数据。

代码示例

以下代码示例演示了如何使用 mounted 生命周期函数解决此问题：

<template>
  <el-table :data="tableData" :default-sort="defaultSort" :default-selected-row-keys="defaultSelectedRowKeys" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: 'John',
          age: 30
        },
        {
          name: 'Jane',
          age: 25
        },
        {
          name: 'Tom',
          age: 35
        }
      ],
      defaultSort: {
        prop: 'age',
        order: 'ascending'
      },
      defaultSelectedRowKeys: ['John'],
      selectedRows: []
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.selectedRows = this.defaultSelectedRowKeys;
    });
  },
  methods: {
    handleSelectionChange(selectedRows) {
      this.selectedRows = selectedRows;
    }
  }
};
</script>