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

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

代码


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

开源项目


  • 微服务商城项目


前后端分离项目

相关文章
|
前端开发
Element Form表单布局(一行多列)
Element Form表单布局(一行多列)
1202 0
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
1313 2
|
8月前
|
JSON 前端开发 JavaScript
搞定 XLSX 预览?别瞎找了,这几个库(尤其最后一个)真香!
本文来自【沉浸式趣谈】,探讨前端处理Excel的三大主流库:xlsx、Handsontable和ExcelJS。 - **xlsx**:轻量高效,适合简单读写数据,但样式支持有限。 - **Handsontable**:功能强大,提供类Excel在线编辑体验,但商用需付费且性能消耗较大。 - **ExcelJS**:现代全能,API友好,支持复杂样式与公式,免费开源,推荐用于精细处理场景。
621 0
搞定 XLSX 预览?别瞎找了,这几个库(尤其最后一个)真香!
|
JavaScript API
【vue3】写hook这几天,治好了我不会组件封装的弱点。
【vue3】写hook这几天,治好了我不会组件封装的弱点。
Element UI 树形控件Tree 【详解】el-tree 展开指定节点,判断是否存在指定节点
Element UI 树形控件Tree 【详解】el-tree 展开指定节点,判断是否存在指定节点
2531 0
|
JavaScript API
vue3父子组件相互调用方法详解
vue3父子组件相互调用方法详解
|
JSON JavaScript 数据格式
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
|
JavaScript
【报错】onMounted is called when there is no active component instance too be associated with.
【报错】onMounted is called when there is no active component instance too be associated with.
1141 4
|
编解码 JavaScript
【vue2】vue2 适配pc端,解决浏览器缩放问题,解决电脑显示设置缩放、分辨率问题
【vue2】vue2 适配pc端,解决浏览器缩放问题,解决电脑显示设置缩放、分辨率问题
1904 1
uniapp前置摄像头拍照功能怎么实现?
uniapp前置摄像头拍照功能怎么实现?