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 🌎
相关推荐
速易达网络6 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
lyj1689977 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
我在北京coding11 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
海天胜景12 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘12 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
乆夨(jiuze)13 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
小彭努力中13 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
xiguolangzi13 小时前
vue3+element-plus el-table列的显隐、列宽 持久化
前端·javascript·vue.js
大猩猩X14 小时前
vxe-upload vue 实现附件上传、手动批量上传附件的方式
vue.js·vxe-ui
come1123415 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js