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

news/2024/7/10 1:37:28 标签: elementui, vue, vue.js

🚀 作者主页: 有来技术
🔥 开源项目: youlai-mall 🍃 vue3-element-admin 🍃 youlai-boot
🌺 仓库主页: Gitee 💫 Github 💫 GitCode
💖 欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请纠正!

代码

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

<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>

开源项目

  • 微服务商城项目
GithubGitee
开源组织有来开源组织有来开源组织
后端youlai-mall 📖youlai-mall 📖
前端mall-admin🌎mall-admin 🌎
移动端mall-app 🌎mall-app 🌎
  • 前后端分离项目
GithubGitee
开源组织有来开源组织有来开源组织
后端youlai-boot 📖youlai-boot 📖
前端vue3-element-admin 🌎vue3-element-admin 🌎

http://www.niftyadmin.cn/n/5218535.html

相关文章

基于C#实现块状链表

在数据结构的世界里&#xff0c;我们会认识各种各样的数据结构&#xff0c;每一种数据结构都能解决相应领域的问题&#xff0c;当然每个数据结构&#xff0c;有他的优点&#xff0c;必然就有它的缺点&#xff0c;那么如何创造一种数据结构来将某两种数据结构进行扬长避短&#…

DevEco Studio中 关闭/开启 代码保存界面自动更新

例如 我们这里有这样一个案例 这里 我们直接将 字体的 50 改为 30 我们直接 Ctrl S 保存代码 效果立马就改了 很明显 这是个热更新的服务 但就例如 我们开发 java比较大的项目 我们不希望它自动更新 免得内存扛不住 我们可以看编辑器上面有一个像小插座一样的东西 目前是一…

内衣洗衣机怎么选?内衣洗衣机便宜好用的牌子推荐

相信不少用户并不太在意衣服和内衣裤裤能不能同时洗&#xff0c;每次清洗都是把内衣裤与其他衣服一起放入洗衣机清洗&#xff0c;其实内衣裤不能直接跟大件的衣物一起放入洗衣机洗的&#xff0c;很容易会造成我们皮肤的瘙痒&#xff0c;我们大部分时间都在户外&#xff0c;暴露…

barcode.js+elementUi——实现二维码的展示——基础积累

barcode.js——实现二维码的展示——基础积累 CSDN服务器一直报错条形码需求分析1.barcode.js的引入2.html页面上的写法——我这边是一个elementUI的弹窗条形码3.script中的部分 CSDN服务器一直报错 最近不知道怎么了&#xff0c;CSDN一直报服务器错误&#xff0c;不能只有我自…

accelerate的使用说明

1 多卡(GPU)使用方法 终端输入指令&#xff0c;生成问答页面 accelerate config 这个方法也是可以的 2 后面修改直接找到这个yaml文件进行修改即可 cd ~/.cache/huggingface/accelerate vim default_config.yaml 进入vim进行修改 3 单卡(GPU)使用方法 vim default_config.…

条形码格式

条形码格式 简述EAN码EAN-13EAN-8 UPC码UPC-AUPC-E 简述 EAN码 EAN码&#xff08;European Article Number&#xff09;是国际物品编码协会制定的一种全球通用的商用条码。EAN码分为&#xff1a;标准版&#xff08;EAN-13&#xff09; 和 缩短版&#xff08;EAN-8&#xff09…

大模型中的各种模型名词概念

目录 一、模型 Transformer GPT&#xff08;GPT-3、GPT-3.5、GPT-4&#xff09; BERT RoBERTa T5 XlNet GShard Switch Transformer InstrucGPT ChatGPT 大模型 LLM&#xff08;大语言模型&#xff09; Alpaca &#xff08;羊驼&#xff09; LLaMA Vicuna 俗称「…

[C/C++]数据结构 堆排序(详细图解)

一:前言 在[C/C]数据结构 堆的详解中,介绍了什么是堆,并且完成了堆的实现和一系列接口,包括向上调整法和向下调整法等,接下来小编介绍一个有点量级的排序方法------堆排序,时间复杂度为O(n*lgn) 二:堆排序详解 2.1 方法介绍 1.首先将待排序数组建为大堆,此时堆顶元素就为数组…