Element-Plus 表格 el-table 如何支持分页多选

作者主页： 有来技术
开源项目： youlai-mall vue3-element-admin youlai-boot
仓库主页： Gitee Github GitCode
欢迎点赞 收藏 ⭐留言 如有错误敬请纠正！

代码

在 el-table-column 设置属性 reserve-selection 为 true 即可，代码如下

<el-table
   ref="tableRef"
   v-loading="loading"
   :data="list"
   row-key="id"
   @selection-change="handleSelectionChange"
 >
	 <el-table-column
	   type="selection"
	   width="80"
	   align="center"
	   :reserve-selection="true"
	 />
	 
el-table>

<script setup lang="ts">
const selectedIds = ref<number[]>([]); // 选中的行ID

/** 行选中 change 事件 */
function handleSelectionChange(rows: any[]) {
  selectedIds .value = rows.map(
    (item: any) => item.id
  );
}
script>

开源项目

• 微服务商城项目

	Github	Gitee
开源组织	有来开源组织	有来开源组织
后端	youlai-mall	youlai-mall
前端	mall-admin	mall-admin
移动端	mall-app	mall-app

• 前后端分离项目

	Github	Gitee
开源组织	有来开源组织	有来开源组织
后端	youlai-boot	youlai-boot
前端	vue3-element-admin	vue3-element-admin