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

ZYJ~2023-10-25 11:36

html 复制代码

<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'

javascript 复制代码

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

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

点击父组件放大镜：

javascript 复制代码

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

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

javascript 复制代码

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列表数据的方法中添加对应代码如下：

javascript 复制代码

// 获取数据列表
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
    }
  })
}

得到的效果：