vue- element-ui table复选框翻页记忆与清除
2023-09-14 08:59:01 时间
背景
在进行表格操作时,使用element-ui 表格控件时加入复选框后默认是无法进行翻页记忆的。
翻页记忆
在进行复选框翻页记忆操作时需要在表格与复选框中分别添加,这个两个参数在翻页复选中必须添加,否则无效。
:row-key="getRowKeys" // 获取每行的信息
:reserve-selection="true" // 数据更新之后保留之前选中的数据
// 获取row的key值的方法
getRowKeys(row) {
return row.id;
},
示例
<el-table
:data="buyerTable"
:row-key="getRowKey"
ref="buyerTable"
@selection-change="handleSelectionChange"
border>
<el-table-column
type="selection"
:reserve-selection="true"
width="55"></el-table-column>
</el-table>
methods: {
// 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
getRowKey(row) {
return row.id
},
// 列表选择,val选中的表格行数据
handleSelectionChange(val) {
console.log(val)
},
// 清空选择的值
clearSelect() {
this.$refs.buyerTable.clearSelection()
}
}
相关文章
- Vue专题 05_详解vue生命周期的每个节点
- SSO 基于token vue + element ui spring boot前后端分离
- Electron + Vue + Mdui
- Vue笔记(11) vue-router
- Vue内部是如何渲染视图
- vue md5.js_VUE.js
- vue子组件向父组件传值的三种方式_vue父页面传值到子页面
- 常用日期时间控件_vue时间控件
- vue相比jquery_angular和vue哪个厉害
- 在网页文档中引入Vue.js的方法有哪些?_vue直接引入js文件没有用
- VUE组件封装_vue组件内部双向绑定
- Vue项目:菜农管理 【maven + spring boot + RESTFul + SSM+vue + axios】
- Vue的computed和watch的区别是什么?_2023-03-01
- Vue中websocket的使用方法
- 网站在线客服系统实时语音视频聊天实战开发,利用peerjs vue.js实现webRTC网页音视频客服系统
- Vue v-memo 指令的使用与源码解析
- vue部分知识点
- Vue2.0 搭建Vue脚手架(vue-cli)详解编程语言
- 使用Vue技术从MSSQL中获取数据(vue获取mssql数据)
- Vue结合Redis,加快数据读取速度(vue读取redis)
- 优化网站性能,Vue搭配Redis缓存更加有效(vue使用redis缓存)
- Vue中触发Redis订阅通知(vue中订阅redis)
- 构建基于Vue与Redis的高性能缓存系统(VUE redis缓存)