Vue3解决el-table在换页和切换页数容量时，选择框选择的数据清空重置的问题。

背景：

el-table在换页和切换页数容量时，选择框选择的数据会被清空重置，所以切换回去的时候，选择的数据为0.。

解决办法：

思路：我们使用另一个数组来存放历史选择数据，该数组不会随着换页和切换页数容量操作而重置清空。

代码1：需要注意的是我们使用的是@select方法，而不是@selection-change

<el-table :data="tableData" v-loading="tableLoading" border :header-cell-style="{background: '#EEF3FF',color: '#333333'}" 
tooltip-effect="dark" style="width: 100%"  max-height="500" class="dataTable" @select="handleSelectionChange" @select-all="selectAll" v-horizontal-scroll="'always'" ref="tableRef">
    <el-table-column type="selection"></el-table-column>
    <el-table-column prop="id" label="id" show-overflow-tooltip />
    <el-table-column prop="name" label="名称" show-overflow-tooltip />
    <el-table-column prop="code" label="代码" show-overflow-tooltip />
    <el-table-column prop="cid" label="代号" show-overflow-tooltip />
</el-table>

<div class="pagination-container">
   <el-pagination :current-page="page.page" :page-sizes="[10, 20, 50, 100]" :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper" background :total="page.total" style="margin: 20px 0 0 0;"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>

代码2：所需要用到的一些参数的定义

let page = reactive({
  page: 1,
  pageSize: 10,
  total: 0
})
//表格数据
const tableData = ref([])
//实时选择的数据
const multipleSelection = ref([])
//
//历史选择的数据,仅存放id字段
const historySelection = ref([])
const tableRef = ref();

代码3：所用到的一些方法，在某些语句已做了对应的解释。

const handleSelectionChange = (selection, row) => {
    console.log('复选框参数',selection, row);
    if(selection.includes(row)){
        console.log('新增');
        multipleSelection.value.push(row)
    }else{
        console.log('取消',multipleSelection.value,historySelection.value);
        //如果是取消勾选操作，就把取消勾选后的选择数据selection传给multipleSelection，并且把historySelection里对应存的历史勾选id字段也去除，实现页数改变和一页展示总数改变也不会清空勾选数据。
        multipleSelection.value = selection
        historySelection.value.splice(historySelection.value.indexOf(row.id),1)
    }
    console.log("复选框变化", multipleSelection.value,historySelection.value)
}

const selectAll = (selection) => {
    console.log('全选',selection);
    multipleSelection.value = selection
    if(selection.length==0){
        //如果取消全选，那么将那一页的全部数据都从historySelection中移除
        console.log('tableData',tableData.value);
        tableData.value.forEach(i=>{
            if(historySelection.value.includes(i.id)){
                historySelection.value.splice(historySelection.value.indexOf(i.id),1)
            }
        })
    }else{
        //如果全选，将选择的数据全部放进到historySelection里
        selection.forEach(i=>{
        if(!historySelection.value.includes(i.id)){
            historySelection.value.push(i.id)
        }
    })
    }
}

async function handleSizeChange(val) {
    saveSelectId()
    page.pageSize = val
    await getData()
    reSelect()
}

async function handleCurrentChange(val) {
    saveSelectId()
    page.page = val
    await getData()
    reSelect()
}

async function saveSelectId(){
    //将选择的数据的id字段存进historySelection，已经存在的不存
    console.log('保存选择',multipleSelection.value,historySelection.value);
    multipleSelection.value.forEach(i=>{
        if(!historySelection.value.includes(i.id)){
            historySelection.value.push(i.id)
        }
    })
}

async function reSelect(){
    //将表格的数据与historySelection对比，将historySelection里的数据重新勾选
    console.log('改变后',multipleSelection.value,historySelection.value);
    for (let i = 0; i < tableData.value.length; i++) {
        if (historySelection.value.includes(tableData.value[i].id)) {
          const row = tableData.value[i];
          //选择的数据显示勾选
          tableRef.value.toggleRowSelection(row);
        }
      }
}

最终实现效果：无论怎么切换都会保留选择的数据。