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 el-select 选择器(下拉框)详解
本文目录 1. 用途 2. 数据绑定 2.1 固定选项 2.2 选项绑定数组 3. 功能效果 3.1 可清空选项 3.2 多选 3.3 可搜索 4. 事件响应 5. 小结
4677 0
Element el-select 选择器(下拉框)详解
|
1月前
基于sortablejs实现拖拽element-ui el-table表格行进行排序
基于sortablejs实现拖拽element-ui el-table表格行进行排序
|
1月前
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
Element-ui 表格 (Table) 组件中动态合并单元格
Element-ui 表格 (Table) 组件中动态合并单元格
611 0
Element-ui 表格 (Table) 组件中动态合并单元格
可编辑多选el-select element源码(整理)
可编辑多选el-select element源码(整理)
|
JavaScript
VUE element-ui之table表格勾选复选框动态合计某列的值
VUE element-ui之table表格勾选复选框动态合计某列的值
522 0
VUE element-ui之table表格勾选复选框动态合计某列的值
|
11月前
element中el-select下拉框位置错乱问题
element中el-select下拉框位置错乱问题
344 0
|
前端开发
el-table表格还可以这么玩
我们都知道表格是横向渲染的,一行一行去展示。不过博主这里有个需求是纵向渲染,一列一列去展示,下面是全部代码,分享出来或许能帮到你们
254 1
el-table表格还可以这么玩
|
前端开发
Element ui 表格(Table)组件中前端实现数据分页和模糊查询
Element ui 表格(Table)组件中前端实现数据分页和模糊查询
502 0
Element ui 表格(Table)组件中前端实现数据分页和模糊查询
|
缓存 JavaScript 前端开发
使用Render 自定义列的表格组件——Table
使用Render 自定义列的表格组件——Table
540 1