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

🚀 作者主页: 有来技术

🔥 开源项目: youlai-mall 🍃 vue3-element-admin 🍃 youlai-boot

🌺 仓库主页: Gitee 💫 Github 💫 GitCode

💖 欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请纠正!

代码

el-table-column 设置属性 reserve-selectiontrue 即可,代码如下

html 复制代码
<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 🌎
相关推荐
开发者小天18 小时前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
java水泥工21 小时前
课程答疑系统|基于SpringBoot和Vue的课程答疑系统(源码+数据库+文档)
spring boot·vue·计算机毕业设计·java毕业设计·大学生毕业设计·课程答疑系统
程序员杨工1 天前
【原创】SpringBoot3+Vue3客户管理系统
vue.js·springboot
theOtherSky1 天前
element+vue3 table上下左右键切换input和select
javascript·vue.js·elementui·1024程序员节
Pu_Nine_91 天前
Vue 3 + TypeScript 项目性能优化全链路实战:从 2.1MB 到 130KB 的蜕变
前端·vue.js·性能优化·typescript·1024程序员节
一个处女座的程序猿O(∩_∩)O1 天前
Vue CLI 插件开发完全指南:从原理到实战
前端·javascript·vue.js
姜至1 天前
el-calendar实现自定义展示效果
前端·vue.js
拉不动的猪1 天前
webpack分包优化简单分析
前端·vue.js·webpack
麦麦大数据1 天前
F035 vue+neo4j中医南药药膳知识图谱可视化系统 | vue+flask
vue.js·知识图谱·neo4j·中医·中药·药膳·南药