vue3+ts+element-plus服务端表格跨页回显，保存参数

<el-table
      ref="modelListRef"
      :data="tableData"
      border
      style="max-height: calc(100% - 60px); overflow: auto"
      @selection-change="handleCurrentRowChange"//复选框选中事件
      :row-key="getRowKey" //每一行标识
      :key="pageInfo.page" //用于回显对应界面中的数据
    >
      <el-table-column type="selection" :selectable="selectable"  width="55" />
      <el-table-column
        :prop="`${dynamicsKey}_name`"
        label="名称"
      ></el-table-column>
    </el-table>
    <el-pagination
    :current-page="pageInfo.page"
    :page-size="pageInfo.size"
    :page-sizes="pageInfo.pageSizes"
    background
    layout="->, total,  prev, pager, next, sizes"
    :total="pageInfo.total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  ></el-pagination>


<script>
//禁用task_status等于ONLINE，可以选中
const selectable = (row: User) => ["ONLINE"].includes(row.task_status)
//禁用task_status不等于ERROR，禁用
const selectable = (row: User) => ["ERROR"].includes(row.task_status)

const pageInfo = reactive({
    page: 1,
    size: 10,
    pageSizes: [10, 20, 30, 40, 50],
    total:0
  })
  const nameList = reactive<any>({})
  const tableData = ref<any>([])
  const modelListRef = ref<any>()
  const selectTableList = ref([])
  let internalSelection = reactive<any>({});
//获取表格数据
   const getTableList = async() => {
    //动态接口
    let interfaceInfo = props.interfaceType == 'getReportList'?                getReportList:fetchTaskModelList
    const { content,total } = await interfaceInfo({
      page: pageInfo.page,
      size: pageInfo.size,
      model_type: props.taskTypes,
      model_is_complete: true,
    })
    tableData.value = content
    pageInfo.total = total
     // 恢复已勾选的行
  const selectedKeys = Object.keys(internalSelection).filter(key => internalSelection[key]);
  selectTableList.value = tableData.value.filter((row:any) => selectedKeys.includes(getRowKey(row)));
  setTimeout(()=>{
    if(selectTableList.value.length>0){
      selectTableList.value.forEach((el:any)=>{
      modelListRef.value!.toggleRowSelection(el,true)
    })
    }
  },100)
  }

//获取选择的参数
const handleConfirmModels = () => {

    const entries = Object.entries(internalSelection);
    const filteredEntries = entries.filter(([, value]) => value === true);
    let filteredObj = Object.keys(Object.fromEntries(filteredEntries));
    const entrieName = Object.entries(nameList);
    const filtereName = entrieName.filter(([, value]) => value !== "");
    let filtereNamenew = filtereName.map(item => item[1]);
    let obj = {
      model_ids: filteredObj,
      model_names: filtereNamenew
    }
  }
  // 表格选中事件
const handleCurrentRowChange = (val: any) => {
  selectTableList.value = val
    // 更新内部已勾选的行
    val.forEach((row:any) => {
       //存取后面需要的多个参数
      nameList[getRowKey(row)] = row[`${props.dynamicsKey}_name`]
      internalSelection[getRowKey(row)] = true;
    });
    // 清除未勾选的行
    tableData.value.filter((row:any) => !val.includes(row)).forEach((row:any) => {
      internalSelection[getRowKey(row)] = false;
      nameList[getRowKey(row)] = ''
    });
}
//表格每一行唯一标识
const getRowKey = (row:any) => {
   return row[`${props.dynamicsKey}_id`];
  }
//切换条数
const handleSizeChange = (val: number) => {
    pageInfo.size = val
    getTableList()
  }
//切换分页
  const handleCurrentChange = (val: number) => {
    pageInfo.page = val
    getTableList()
  }
<script>