vue+elementUi中的table实现跨页多选功能(示例详解)
最近在开发工业品超市的后台系统,遇到一个需求,就是实现在一个table
表格中多选数据,由于table
表格中的数据较多,所以要分页获取,因此现在的需求变为:如果在跨页的table表格中跨页选择数据
在网上查了好多,有些方法真的是无语的,写的乱七八糟的,我整理一下,亲测有效
看效果图:
这样返回到第一页的时候,第一页选中的两条数据还是勾选的状态的。
点击表格底部的完成选择订单
按钮,可以拿到选中的三条数据。
1.跨页多选功能实现 给table
添加row-key
属性
<el-table :data="orderData" v-loading="orderloading" v-if="orderVisible" border :row-key="getRowKey" style="width: 100%" height="300px" @selection-change="handleSelectionChange" ref="multipleTable" > .... </el-table>
简单分析一下上面的代码:
data:就是table表格中要展示的数据,格式是一个数组
v-loading:加载表格数据时,为了能够更好的人性化,可以添加这个加载属性,然后在表格数据加载的过程中有个数据加载中的效果
v-if:因为我这个表格是跟dialog弹层一同存在的,为了保证数据在弹窗打开时能够实时渲染,所以我加了这个判断条件
border:给表格添加边框
row-key:这个就是实现跨页选择的关键,后面会讲到用法
style:给表格添加宽度等css样式
height:给表格添加高度,因为如果表格没有数据或者数据较少的时候,为了美观添加高度限制,这样当表格数据过多时,还可以实现固定表头的效果
selection-change:勾选数据时,会触发此函数
ref:类似于html中的Id,就是可以获取唯一dom的参数
上面中的row-key
需要绑定一个唯一值,我这边的table
中的数据,每一条数据中的id
是唯一值,因此getRowKey
函数如下:
getRowKey(row) { return row.id; },
2.在type="selection"元素上添加:reserve-selection=“true”
重点:这样就可以了,选了数据再分页再返回去基本是没问题的还是选中状态
到此这篇关于vue+elementUi中的table实现跨页多选功能的文章就介绍到这了,更多相关vue elementUi跨页多选内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue项目实现会议预约功能(包含某天的某个时间段和某月的某几天)
这篇文章主要介绍了vue项目实现会议预约功能(包含某天的某个时间段和某月的某几天),本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-02-02uniApp h5项目如何通过命令行打包并生成指定路径及文件名称
用uni-app来写安卓端,近日需要将程序打包为H5放到web服务器上,经过一番折腾,这里给大家分享下,这篇文章主要给大家介绍了关于uniApp h5项目如何通过命令行打包并生成指定路径及文件名称的相关资料,需要的朋友可以参考下2024-02-02使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
在网站中普遍会遇到这样的需求,路由跳转前做一些验证,比如登录验证(未登录去登录页)。下面脚本之家小编给大家带来了使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能,感兴趣的朋友一起看看吧2018-03-03vue3+ts+vite打包后静态资源404无法加载js和css问题解决办法
这篇文章主要给大家介绍了关于vue3+ts+vite打包后静态资源404无法加载js和css问题的解决办法,文中通过代码以及图文介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-04-04
最新评论