element plus -- el-table 中分页选中回显

需求：

切换分页或者根据筛选条件过滤后 选中项依然保持选中状态

代码：

 <el-row class="pro-list-container">
    <el-table
      :data="productAttrs"
      ref="multipleTable"
      class="pro-table"
      :header-cell-style="{ background: 'var(--el-fill-color-light)' }"
      @select="handleCheckClick"
      @select-all="handleAllClick"
      @row-click="handleRowClick"
    >
      <el-table-column type="selection" width="50" />
      <el-table-column prop="name" label="产品名称" min-width="120 " >
        <template #default="scope">
          <el-row class="product-name">
            <el-image class="pro-img" v-if="scope.row.pic" :src="scope.row.pic"></el-image>
            <img class="pro-img" v-else src="../../../../../../assets/image/product_empty.png" />
            <el-row class="pro-text">
              <span class="pro-title" @click="handleTargetDetail(scope.row)">{{ scope.row.name }}</span>
              <span class="pro-three" v-if="scope.row.threeLevelName">{{ scope.row.threeLevelName }}</span>
              <span class="pro-three" v-else>{{ scope.row.twoLevelName }}</span>
            </el-row>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column prop="productSn" label="物料编号" />
      <el-table-column prop="panelMaterial" label="面板材质" />
      <el-table-column prop="panelButtonType" label="按键类型" />
      <el-table-column prop="price" label="市场价">
        <template #default="scope">
          <span>￥{{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="isChecked" label="是否选中">
        <template #default="scope">
          <span>{{ scope.row.isChecked }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="pro-footer">
      <el-button class="con-btn" type="primary" @click="handleGetCheckList(false)">确定</el-button>
      <IocPagination
        class="pagination-fixed"
        :total="total"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange"
      />
    </el-row>
  </el-row>

主要方法：

// row：表格行；isAdd：是否勾选
const rowChangeAll = (row, isAdd) => {
  const index = multipleSelection.value.findIndex(item => item.productId === row.productId)
  // 不存在只能加,存在只能减
  if (index === -1) {
    if (isAdd) {
      multipleSelection.value.push(row)
    }
  } else {
    if (!isAdd) {
      multipleSelection.value.splice(index, 1)
    }
  }
  console.log(multipleSelection.value, 'multipleSelection.value')
}


// 单选
const handleCheckClick = (selection, row) => {
  const isAdd = selection.some(selectRow => selectRow.productId === row.productId)
  rowChangeAll(row, isAdd)
}
//全选
const handleAllClick = selection => {
  console.log(selection, '全选')
  // 默认当页全选
  let isAdd = true
  let changeSelect = selection.slice()
  if (!changeSelect.length) {
    // 取消当页全选，获取表格当前页所有数据
    isAdd = false
    changeSelect = productAttrs.value.slice()
  }
  // 全选时，存在之前已经选上；只加不删
  changeSelect.forEach(row => {
    rowChangeAll(row, isAdd)
  })
}

const handleRowClick = row => {
  row.isChecked = !row.isChecked
  multipleTable.value.toggleRowSelection(row)
}

watch(
  () => props.checkData,
  newValue => {
    nextTick(() => {
      multipleSelection.value = newValue
    })
  },
  {
    deep: true
  }
)
watch(
  () => props.tableData,
  newValue => {
    nextTick(() => {
      newValue.forEach(select => {
        const resRow = multipleSelection.value.find(row => select.productId === row.productId)
        if (resRow) {
          select.isChecked = true
          multipleTable.value.toggleRowSelection(select, true)
        }
      })
      productAttrs.value = newValue
    })
  },
  { deep: true }
)