el-table跨页勾选

想实现跨页勾选，需要用到el-table-column中的reserve-selection属性

<template>
  <el-table ref=tableRef :data="tableData" style="width: 100%"  :row-key="getRowKeys" @selection-change="handleSelect">
    <el-table-column type=selection :reserve-selection="true" width="55"/>
    


  </el-table>
 
</template>

<script lang="ts" setup>
import {ref} from 'vue'
const tableData = [
  
]
const tableRef = ref()
const selectIds = ref<any[]>([])
const handleSelect = (val: any[]) => {
  selectIds.value = val.map(item => item.id)
  console.log(selectIds.value)
}
const getRowKeys = (row:any) => {
  return row.id
}
</script>

在第一页勾选行

控制台打印结果：

当来到第二页时，显示已勾选状态

此时再任意勾选行，控制台打印结果：

当执行完你的需求后，如果想取消显示刚才行的勾选状态，在你的业务逻辑后，可以用如下方法

const myFunction = ()=>{
  //业务逻辑

  tableRef.value.clearSelection()
}