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 ui el-table 多选 表头全选框替换文字
element ui el-table 多选 表头全选框替换文字
1642 0
Element el-select 选择器(下拉框)详解
本文目录 1. 用途 2. 数据绑定 2.1 固定选项 2.2 选项绑定数组 3. 功能效果 3.1 可清空选项 3.2 多选 3.3 可搜索 4. 事件响应 5. 小结
6046 0
Element el-select 选择器(下拉框)详解
|
5月前
|
JavaScript 前端开发
table表格和下拉组件中data为什么必须是一个函数?
table表格和下拉组件中data为什么必须是一个函数?
|
6月前
基于sortablejs实现拖拽element-ui el-table表格行进行排序
基于sortablejs实现拖拽element-ui el-table表格行进行排序
Element-ui 表格 (Table) 组件中动态合并单元格
Element-ui 表格 (Table) 组件中动态合并单元格
931 0
Element-ui 表格 (Table) 组件中动态合并单元格
|
JavaScript
el-select下拉多选框 el-select 设置默认值不可删除功能
Element-UI是一款广泛使用的Vue.js组件库,其中El-Select下拉多选框组件在实际项目开发中经常被使用。然而,在Element 3.0版本中,El-Select下拉多选框默认值可被删除,这可能会导致一些意外情况。本文将介绍如何解决这个问题,实现El-Select下拉多选框设置默认值不可删除的功能。
668 0
el-select下拉多选框 el-select 设置默认值不可删除功能
|
缓存 JavaScript 前端开发
el-table 列的动态显示与隐藏
当我们在对表格数据查看的时候,可能某些列的数据是当前想要重点关注的,而某些列并不需要展示出来,我们就可以通过对表格的列进行实时的一个切换去实现动态的显示与隐藏。