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 🌎
相关推荐
苹果电脑的鑫鑫41 分钟前
vue相关的拖拉拽官网
javascript·vue.js·ecmascript
用户102835132784544 分钟前
深入解析 Vue 3 的 KeepAlive 组件
vue.js
白日依山尽yy1 小时前
Vue、微信小程序、Uniapp 面试题整理最新整合版
vue.js·微信小程序·uni-app
BillKu2 小时前
Vue3数组去重方法总结
前端·javascript·vue.js
江城开朗的豌豆2 小时前
Vue+JSX真香现场:告别模板语法,解锁新姿势!
前端·javascript·vue.js
摸鱼仙人~2 小时前
Vue.js 指令系统完全指南:深入理解 v- 指令
前端·javascript·vue.js
江城开朗的豌豆2 小时前
Vue列表渲染的坑:为什么不能用index当key?血泪教训总结!
前端·javascript·vue.js
前端小巷子2 小时前
Vue 虚拟 DOM
前端·vue.js·面试
江城开朗的豌豆2 小时前
Vue中key的妙用:为什么你的列表渲染总出bug?
前端·javascript·vue.js
妮妮喔妮4 小时前
图片上传 el+node后端+数据库
javascript·数据库·vue.js