element+vue表格分页多选

1、使用row-key和reserve-selection结合就能实现分页多选回显

<el-table ref="table":data="tableData":header-cell-style="{'text-align': 'center'}":cell-style="{ 'text-align': 'center' }"@selection-change="handleSelectionChange":row-key="getRowKeys"><el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
</el-table>
data() {return {// 获取row的key值getRowKeys(row) {return row.id;},selectedData: [],//多选的数据};
},
methods:{handleSelectionChange(rows){this.selectedData = [];if (rows) {this.selectedData = rows.map(row => { return row.id })}}
}

2、清空选中的数据

this.$refs.table.clearSelection()

element+vue表格分页多选相关推荐

element-table表格分页多选
# 项目场景: element table分页多选列表,使用reserve-selection,获取多选数据时正常,但是返显出现问题.返显后,再次选择,没有打开的列表页数据会丢失.# 问题描述: 保存 ...
Vue + Element UI 表格分页记忆选中，分页切换页面打勾不丢失
方法一: 官方也有基于这种操作给出通过属性解决的方法: <el-table :row-key="rowKey"><el-table-column type=&qu ...
Vue + Element UI 表格分页记忆选中
官方基于这种操作给出通过属性解决的方法: :row-key:行数据的 Key ,用来优化 Table 的渲染:在使用 reserve-selection 功能与显示树形数据时,该属性是必填的.类型为 ...
基于iview 封装一个vue 表格分页组件
iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...
html的表格变成输入框,element+vue表格点击变成输入框（可编辑状态）
完整html内容 stripe border :data="dataList" @cell-click="tabClick" :row-class-name=& ...
element el-pagination 表格分页居中显示方法
//分页居中align="center" <el-paginationalign="center" style="margin: 8px&quo ...
Vue+Element表格动态列+表格分页
LayUI表格动态列及分页LayUI+JavaScript表格动态列+表格分页效果如图: 代码: 引用JQuery,Vue,Element等文件,换成自己的路径 <!DOCTYPE html& ...
Vue3 - Element plus 实现 “带分页“ 表格组件，实现跨页进行 “分页勾选“ 的多选功能（解决分页表格组件＜el-table＞跨页后已前勾选的行自动消失问题）详细示例解决教程
前言在 Vue3 项目中,使用 Element Plus 组件库的表格组件时,出现了跨页勾选复选框消失的问题. 本文实现了 vue3 中 element plus 表格组件 <el-table ...
vue element el-table表格勾选求和 el-table 勾选获取表格某几列数据求和
vue element el-table 表格勾选获取几列数据求和 el-table表格勾选求和先看案例如下图所示:el-table 勾选后求出支付金额数据,计算出总金额数据. 我们来一步步分析方便 ...

element+vue表格分页多选

1、使用row-key和reserve-selection结合就能实现分页多选回显

2、清空选中的数据

element+vue表格分页多选相关推荐

最新文章

热门文章