vue3实现el-table翻页选中数据不变及根据已有数据默认选中

<el-table ref="dataTable" border stripe highlight-current-row v-loading="dataListLoading"
              :data="dataList"
              :row-key="getRowKey"
              @row-click="rowClick"
              @select="getSelected"
              @select-all="getSelected">
      <el-table-column v-if="isShow" type="selection" width="55"  :reserve-selection="true" />
      <el-table-column prop="customerAbbreviation" header-align="center" align="center" label="客户编码"/>
      <el-table-column prop="customerName" header-align="center" align="center" label="客户姓名"/>
      <el-table-column prop="kernelEmployeeName" header-align="center" align="center" label="主要维护人"/>
    el-table>

1、实现翻页选中数据不变

在el-table中添加:row-key='getRowKey'属性，在type=selection的el-table-column中添加:reserve-selection='ture'

// 保持选中状态
function getRowKey(row){
  return row.id
}

2、根据已有数据默认选中

点击父组件放大镜：

// 客户选择
function showCustomerSelect() {
  customerSelectVisible.value = true
  nextTick(() => {
    proxy.$refs.customerSelectRef.init()
  })
}

点击放大镜初始化子组件客户列表代码：

function init() {
  dialogVisible.value = true
  nextTick(() => {
    initData()
    //table列表数据
    getDataList() 
    
    //根据选中数据默认选中 dataList.value为需要选择的数据表数据
    const tageData = props.selectTagData //父组件传递过来的选中数据
    dataList.value.forEach(item=>{
      if(tageData.length>0){
        tageData.forEach(selected=>{
          if(selected.id === item.id){
            proxy.$refs.dataTable.toggleRowSelection(item,true)
          }else{
            proxy.$refs.dataTable.clearSelection()
          }
        })
      }else{
        proxy.$refs.dataTable.clearSelection()
      }
    })
  })
}

在获取table列表数据的方法中添加对应代码如下：

// 获取数据列表
function getDataList() {
  dataListLoading.value = true
  listCustomer({
    pageNum: pageIndex.value,
    pageSize: pageSize.value,
    name: dataForm.value.name,
    type:dataForm.value.type
  }).then(response => {
    if (response && response.code === 200) {
      dataList.value = response.data.records
      totalPage.value = response.data.total
      //主要代码
      //checkData.value最新需要选中的数据，props.selectTagData原来选中的数据
      //根据选中数据默认选中
      const tageData = props.selectTagData
      dataList.value.forEach(item=>{
        tageData.forEach(selected=>{
          if(selected.id === item.id){
            proxy.$refs.dataTable.toggleRowSelection(item,true)
          }
        })
      })
      dataListLoading.value = false
    }
  })
}

得到的效果：

3、再次点击放大镜选择其他选项或是取消已选选项

//弹窗列表-客户选择列表
<el-table ref="dataTable" border stripe highlight-current-row v-loading="dataListLoading"
              :data="dataList"
              :row-key="getRowKey"
              @row-click="rowClick"
              @select="getSelected"
              @select-all="getSelected">
      <el-table-column v-if="isShow" type="selection" width="55"  :reserve-selection="true" />
      <el-table-column prop="customerAbbreviation" header-align="center" align="center" label="客户编码"/>
      <el-table-column prop="customerName" header-align="center" align="center" label="客户姓名"/>
      <el-table-column prop="kernelEmployeeName" header-align="center" align="center" label="主要维护人"/>
el-table>

 
const customerData = ref([])
function getSelected(selection, row){
  if(initial.value>0 ){
    let isCheck = false //是否取消 true=取消 false=不取消
    customerData.value.forEach(imgItem => {
      if (imgItem.id === row.id) {
        // 先findIndex拿到index，否则直接否则直接splice（imgItem，1）是会删除失败的！
        customerData.value.splice(customerData.value.findIndex((item) => item.id === row.id), 1)
        isCheck = true
      }
    })
    if(!isCheck){
      customerData.value.push(row)
    }
  }else{
    customerData.value.push(row)
  }
}