使用element-ui中的table时，当有多选又有翻页功能时，点击翻页后之前选中的数据丢失

**使用 Element-UI 中的 Table 时遇到的问题**

当我们在项目中使用 Element-UI 的 Table 组件时，经常会遇到一些问题。其中一个常见的问题是，当有多选功能又有翻页功能时，点击翻页后之前选中的数据会丢失。这是一个比较棘手的问题，因为它涉及到了表格的渲染和用户交互。

**问题原因**

这个问题的原因在于 Element-UI 的 Table 组件是使用虚拟滚动来实现的，这意味着当我们滚动到表格底部时，组件会自动加载下一页的数据。然而，当我们点击翻页按钮时，组件会重新渲染整个表格，而之前选中的数据就会丢失。

**解决方案**

为了解决这个问题，我们需要在翻页时保存当前选中的数据，然后在重新渲染表格后恢复这些数据。

###1. 使用 `v-model` 绑定选中数据首先，我们需要使用 `v-model` 绑定选中数据到一个数组中。这样我们就可以在翻页时保存当前选中的数据。

html
 
 


// 在 Vue 实例中data() {
 return {
 tableData: [],
 selectedRows: [] //保存选中数据的数组 }
},
methods: {
 handleSelectionChange(val) {
 this.selectedRows = val;
 }
}

###2. 在翻页时保存当前选中的数据当我们点击翻页按钮时，我们需要保存当前选中的数据到 `selectedRows` 数组中。

javascript// 在 Vue 实例中methods: {
 handleCurrentChange(val) {
 this.selectedRows = [...this.selectedRows, ...val];
 }
}

###3. 在重新渲染表格后恢复选中数据当我们重新渲染表格后，我们需要恢复之前保存的选中数据。

javascript// 在 Vue 实例中methods: {
 handleTableRender() {
 this.selectedRows = [...this.selectedRows];
 }
}

###4. 使用 `watch` 监听 `selectedRows` 的变化我们需要使用 `watch` 监听 `selectedRows` 的变化，以便在选中数据发生变化时更新表格。

javascript// 在 Vue 实例中watch: {
 selectedRows(val) {
 this.tableData = [...val];
 }
}

###5. 使用 `computed` 计算选中数据的长度我们需要使用 `computed` 计算选中数据的长度，以便在表格中显示选中数据的数量。

javascript// 在 Vue 实例中computed: {
 selectedRowsLength() {
 return this.selectedRows.length;
 }
}

###6. 使用 `slot` 插槽渲染选中数据我们需要使用 `slot` 插槽渲染选中数据，以便在表格中显示选中数据。

html<el-table :data="tableData" @selection-change="handleSelectionChange">
 <el-table-column type="selection" width="55"></el-table-column>
 <!-- 其他列 -->
</el-table>

// 在 Vue 实例中methods: {
 renderSelectedRows() {
 return this.selectedRows.map((row) => {
 return (
 <div key={row.id}>
 {row.name}
 </div>
 );
 });
 }
}

通过以上步骤，我们就可以在使用 Element-UI 的 Table 组件时，实现多选功能和翻页功能的同时保留之前选中的数据。