vue3实现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() 
    
    //根据选中数据默认选中
    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
    }
  })
}

得到的效果：