实现Element的table表格选中点击下一页回来保持选中

主要就是在 el-table 标签上添加 :row-key="rowKey" 和 el-table-column 标签上 添加： :reserve-selection="true"。

<el-table :data="tableList" ref="tableRef" :row-key="getRowkey" >
<el-table-column type="selection" :reserve-selection="true" width="55" align="center"></el-table-column>
 </el-table>

const getRowkey = (row) => {
  return row.id
}

然后就是利用toggleRowSelection属性实现默认选中

举个例子:以vue3为例

<!--
 * @Author: 方志良 
 * @Date: 2023-12-01 08:58:08
 * @LastEditors: 方志良 
 * @LastEditTime: 2024-03-16 20:24:57
 * @FilePath: \meyi\src\views\technology\sopmodel\index.vue
 * 
-->
<template>
  <div>
    <el-table :data="tableList" ref="tableRef" :row-key="getRowkey" @select="selectBtn" @select-all="selectBtn">
      <el-table-column type="selection" :reserve-selection="true" width="55" align="center"></el-table-column>
      <el-table-column label="名称" prop="lName" align="center"></el-table-column>
    </el-table>
    <el-row justify="end">
      <el-pagination v-show="total > 0" :total="total" v-model:current-page="pageNum" v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20]" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </el-row>
  </div>
</template>

<script setup >
import { getSopmodelPage } from '@/api/technology/sopmodel'
const sopmodelForm = ref({
  sopTplName: '',
  status: ''
})
const tableList = ref([])
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)
let selectIds = ref([])
onMounted(() => {
  getSopmodelPageFn({ pageNum: pageNum.value, pageSize: pageSize.value })
})


// 列表渲染
const getSopmodelPageFn = async () => {
  let res = await getSopmodelPage({ pageNum: pageNum.value, pageSize: pageSize.value })
  total.value = res.total
  tableList.value = res.rows
}
// 多选框
const selectBtn = (val) => {
  let arr = val.map(item => item.id).value = val.map(item => item.id)
  selectIds.value = selectIds.value.concat(arr)
  console.log(selectIds.value, 'selectIds.value')
}

const getRowkey = (row) => {
  return row.id
}
// 分页相关
const tableRef = ref(null)
const handleSizeChange = async () => {
  getSopmodelPageFn()


  let selectArr = [...new Set(selectIds.value)]
  console.log(selectArr, 'selectArr')
  tableList.value.forEach((item) => {
    selectArr.forEach((item2) => {
      if (item.id == item2) {
        tableRef.value.toggleRowSelection(item, true)
      }
    })
  })

}
const handleCurrentChange = async () => {
  getSopmodelPageFn()

  let selectArr = [...new Set(selectIds.value)]

  console.log(selectArr, 'selectArr')
  tableList.value.forEach((item) => {
    selectArr.forEach((item2) => {
      if (item.id == item2) {
        tableRef.value.toggleRowSelection(item, true)
      }
    })
  })
}

</script>