Element-UI分页跨页多选+数据回显

今天在处理需求时，发现Element-UI官方没有提供分页跨页多选功能，于是我上网查询资料并实现了该功能，并在文章末尾分享了相关代码。起初，我使用了原生el-table的表格，并在其基础上进行了改造。

一、功能实现

• 第一步：在el-table标签上添加 :row-key="getRowKey" 属性，属性值如下：

const getRowKey = (row) => {
  return row.id
}

row-key属性说明参考Element-UI官网：

​ 行数据的 Key，用来优化 Table 的渲染； 在使用reserve-selection功能与显示树形数据时，该属性是必填的。 类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。

• 第二步：在第一列（选择框那一列 el-table-column）上添加:reserve-selection="true"属性。

​ reserve-selection属性说明：数据刷新后是否保留选项，仅对 type=selection 的列有效， 请注意， 需指定 row-key 来让这个功能生效。

• 第三步：编写@selection-change="handleSelectionChange"事件；写在el-table上

​ 这是最后一步，我们我们只需要编写一个事件就可以得到我们所选的数据了

const handleSelectionChange = (val: any) => {
  console.log("选中的行", val)
}

下面我们来看效果图吧：

第一页选择3条数据，第二页选择2条数据：

然后我们回到与第一页，可以发现我们前一次选择的数据还在

控制台也打印了我们所选的数据！

二、数据回显

​ 那么问题来了，困扰了我三个月的回显问题最终在我和同事多轮鞭策GPT下给研究出来了，但是这可能不是最优解，不过项目上能实现需求那就万事大吉，是吧？老铁

• 第一步：先声明变量const myTable = ref(null) 然后给el-table添加ref="myTable"属性。

• 第二步：调用el-table暴露出来的toggleRowSelection方法，假设我们获取到接口数据 [2,4,5] ，这串id数组是需要回显的，那么我们写一个方法来遍历表格数据与id数组做匹配，匹配成功的设置为选中状态，待页面渲染完毕后在onMounted函数调用该方法。

  const loadDataAndUpdateSelection = async () => {
      // 确保DOM已更新
      await nextTick()
      // 更新选中状态
      tableData.value.forEach((row: any) => {
        if (selectedId.value.includes(row.id)) {
          myTable.value.toggleRowSelection(row, true)
        }
      })
  }
  

可以看到，分页数据也可以被选中

完整代码：

<template>
  <el-table :data="computedTableData" :row-key="getRowKey" @selection-change="handleSelectionChange" ref="myTable"
    style="width: 800px">
    <el-table-column type="selection" :reserve-selection="true" width="55" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="phone" label="电话" width="180" />
    <el-table-column prop="address" label="地址" />
  </el-table>
  <p></p>
  <!-- 分页组件 -->
  <el-pagination background layout="prev, pager, next" :total="tableData.length" :page-size="pageSize"
    @change="handleChange" />
</template>

<script lang="ts" setup>
import { onMounted, ref, nextTick } from "vue"

// 设置每页显示的条目数量
const pageSize = 5
// 当前页数，使用ref进行响应式绑定
const currentPage = ref(1)
// 根据当前页和每页显示的条目数量计算要显示的数据
const computedTableData = ref([]);

const myTable = ref()
const selectedId = ref([2, 4, 9])

//页面数据
const tableData = ref([
  { id: 1, name: "周军", phone: "14573161763", address: "南京解放路9号" },
  { id: 2, name: "张芳", phone: "14124978186", address: "重庆长安街5号" },
  { id: 3, name: "刘伟", phone: "13537903700", address: "武汉解放路7号" },
  { id: 4, name: "黄静", phone: "19945446079", address: "重庆和平路1号" },
  { id: 5, name: "张娜", phone: "17385360867", address: "广州朝阳路2号" },
  { id: 6, name: "李强", phone: "14573161763", address: "北京朝阳门外大街" },
  { id: 7, name: "王敏", phone: "14124978186", address: "上海南京东路" },
  { id: 8, name: "赵丽", phone: "13537903700", address: "成都天府广场" },
  { id: 9, name: "孙杰", phone: "19945446079", address: "杭州西湖区" },
  { id: 10, name: "周瑜", phone: "17385360867", address: "苏州园区" },
  { id: 11, name: "李华", phone: "13798765432", address: "深圳南山区" },
  { id: 12, name: "王芳", phone: "15987654321", address: "广州白云区" },
  { id: 13, name: "赵勇", phone: "13212345678", address: "上海浦东新区" },
  { id: 14, name: "钱多", phone: "18887654321", address: "北京东城区" },
  { id: 15, name: "孙悟空", phone: "15012345678", address: "杭州余杭区" },
  { id: 16, name: "周星驰", phone: "13987654321", address: "深圳福田区" },
  { id: 17, name: "吴京", phone: "15876543210", address: "成都锦江区" },
  { id: 18, name: "郑伊健", phone: "13612345678", address: "重庆江北区" },
  { id: 19, name: "刘德华", phone: "18765432109", address: "南京玄武区" },
  { id: 20, name: "梁朝伟", phone: "13598765432", address: "上海黄浦区" },
  { id: 21, name: "张学友", phone: "18912345678", address: "广州越秀区" },
  { id: 22, name: "黎明", phone: "13198765432", address: "深圳宝安区" },
  { id: 23, name: "郭富城", phone: "13312345678", address: "北京海淀区" },
  { id: 24, name: "周润发", phone: "18212345678", address: "杭州萧山区" },
  { id: 25, name: "成龙", phone: "17765432109", address: "重庆渝中区" }
])

const getRowKey = (row: any) => {
  return row.id
}

const handleSelectionChange = (val: any[]) => {
  console.log("选中的行", val)
}

const handleChange = (currentPage: number, pageSize: number) => {
  // 点击事件
  const start = (currentPage - 1) * pageSize
  const end = start + pageSize
  computedTableData.value = tableData.value.slice(start, end)
}

const initData = async () => {
  computedTableData.value = tableData.value.slice(0, pageSize)
}

const loadDataAndUpdateSelection = async () => {
  // 确保DOM已更新
  await nextTick()
  // 更新选中状态
  tableData.value.forEach((row: any) => {
    if (selectedId.value.includes(row.id)) {
      myTable.value.toggleRowSelection(row, true)
    }
  })
}

onMounted(async () => {
  // 在组件加载时执行初始化
  await initData()
  loadDataAndUpdateSelection()
}) 
</script>