Element跨页全选操作-跨页记住已勾选

通过使用Element框架，实现跨页全选操作，并记住已勾选的数据。在表格初始化时，可显示默认勾选数据和不可操作数据。当用户勾选完成后，保存当前勾选结果作为下次表格的回显数据。

使用Element框架的跨页全选功能，可以方便地实现表格数据的跨页勾选和保存。在用户勾选完成时，保存当前勾选结果作为下次表格的回显数据，提高用户体验和表格操作效率。
### 步骤 1. **引入Element框架**

首先，您需要在您的项目中引入Element框架。可以通过以下方式引入：

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2. 创建表格组件

接下来，您需要创建一个表格组件。在这个组件中，您将使用Element框架的 el-table 组件来显示表格数据。

<el-table :data="tableData" @selection-change="handleSelectionChange">
  <el-table-column type="selection" width="55"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>

3. 处理勾选事件

当用户勾选或取消勾选表格数据时，您需要处理 selection-change 事件。在这个事件中，您可以获取当前勾选的数据，并将其保存到您的状态中。

handleSelectionChange(selection) {
  this.selectedData = selection;
}

4. 在表格初始化时显示回显数据

在表格初始化时，您需要根据保存的勾选数据来显示回显数据。

mounted() {
  this.selectedData = this.$store.state.selectedData;
}

5. 保存勾选结果

当用户勾选完成后，您需要保存当前勾选结果作为下次表格的回显数据。

saveSelection() {
  this.$store.commit('setSelectedData', this.selectedData);
}

结论

通过使用Element框架，可以轻松实现跨页全选操作，并记住已勾选的数据。这可以大大提高用户体验和表格操作效率。