element ui 分页记忆checked
<el-table
:data="tableData"
border
ref="multipleTableChannel"
@selection-change="selectChannel"
style="width: 100%">
<el-table-column
type="selection"
width="">
</el-table-column>
<el-table-column
type="index"
width=""
align="center"
label="序号"/>
<el-table-column
prop="date"
align="center"
label="商户名称">
</el-table-column>
<el-table-column
prop="name"
align="center"
label="联系人">
</el-table-column>
<el-table-column
prop="address"
align="center"
label="联系电话">
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
layout="total,prev, pager, next"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
multipleSelectionAll: [], // 所有选中的数据包含跨页数据
multipleSelection: [], // 当前页选中的数据
idKey: 'id', // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
// 设置选中的方法
setSelectRow() {
if (!this.multipleSelectionAll || this.multipleSelectionAll.length <= 0) {
return;
}
// 标识当前行的唯一键的名称
let idKey = this.idKey;
let selectAllIds = [];
let that = this;
this.multipleSelectionAll.forEach(row=>{
selectAllIds.push(row[idKey]);
})
this.$refs.table.clearSelection();
for(var i = 0; i < this.tableData.length; i++) {
if (selectAllIds.indexOf(this.tableData[i][idKey]) >= 0) {
// 设置选中,记住table组件需要使用ref="table"
console.log(this.tableData[i])
this.$refs.table.toggleRowSelection(this.tableData[i], true);
}
}
} ,
// 记忆选择核心方法
changePageCoreRecordData () {
// 标识当前行的唯一键的名称
let idKey = this.idKey;
let that = this;
// 如果总记忆中还没有选择的数据,那么就直接取当前页选中的数据,不需要后面一系列计算
if (this.multipleSelectionAll.length <= 0) {
this.multipleSelectionAll = this.multipleSelection;
return;
}
// 总选择里面的key集合
let selectAllIds = [];
this.multipleSelectionAll.forEach(row=>{
selectAllIds.push(row[idKey]);
})
let selectIds = []
// 获取当前页选中的id
this.multipleSelection.forEach(row=>{
selectIds.push(row[idKey]);
// 如果总选择里面不包含当前页选中的数据,那么就加入到总选择集合里
if (selectAllIds.indexOf(row[idKey]) < 0) {
that.multipleSelectionAll.push(row);
}
})
let noSelectIds = [];
// 得到当前页没有选中的id
this.tableData.forEach(row=>{
if (selectIds.indexOf(row[idKey]) < 0) {
noSelectIds.push(row[idKey]);
}
})
noSelectIds.forEach(id=>{
if (selectAllIds.indexOf(id) >= 0) {
for(let i = 0; i< that.multipleSelectionAll.length; i ++) {
if (that.multipleSelectionAll[i][idKey] == id) {
// 如果总选择中有未被选中的,那么就删除这条
that.multipleSelectionAll.splice(i, 1);
break;
}
}
}
})
console.log(that.multipleSelectionAll)
},
handleCurrentChange(val){
// 改变页的时候调用一次
this.page.currentPage = val;
this.changePageCoreRecordData();
this.query();
},
handleSelectionChange1 (val) {
// table组件选中事件,记得加上@selection-change="handleSelectionChange"
this.multipleSelection = val;
},
query () {
// 分页查询数据方法,在成功返回数据方法里调用setSelectRow方法,使每次分页查询都能勾选中
if(this.page.currentPage==1){
this.tableData=this.tableDatsa
}else{
this.tableData=this.datass
}
setTimeout(()=>{
this.setSelectRow();
}, 200)
},
element ui 分页记忆checked的更多相关文章
- vue2.0+Element UI 表格前端分页和后端分页
之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...
- vue2.0 + Element UI + axios实现表格分页
注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...
- element UI 饿了么 UI 分页 按钮不显示的问题
https://blog.csdn.net/sinat_37255207/article/details/88914235 一个很坑的 深坑 element UI 的 按钮 不显示的深坑 <e ...
- Element UI表格组件技巧:如何简洁实现跨页勾选、跨页统计功能
业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...
- vue项目使用element ui的Checkbox
最近使用到element ui的下拉多选框Checkbox Checkbox用法可参考与于 http://element.eleme.io/#/zh-CN/component/checkbox Che ...
- element UI table 过滤 筛选问题
一.问提描述 使用elementUI table 官方筛选案例,发现筛选不是服务器端筛选,而是浏览器端对每一页进行单独筛选. 如何在服务器端筛选? 二.查询Element UI 官网table组 ...
- Element UI样式无法修改解决方法。
最近在做的项目中要用到Element UI组件来写,非常方便,但毕竟Element UI是有它自己的默认样式的,并不是客户所要求的,但就在我想要修改样式时遇到了棘手的问题. 如何引入和使用 Eleme ...
- Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
- vue + element ui 实现实现动态渲染表格
前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...
随机推荐
- SVN的基本使用
2020年7月6日 为什么需要版本控制? 需要清晰地保存某些文件的不同修订版本 控制文件的发屐过程,找出导致 BUG 的原因 轻松将项目或文件恢复到指定版本 极大方便团队之间协同开发,防止出现混乱 在 ...
- 微信小程序自动化测试最佳实践(附 Python 源码)
本文为霍格沃兹测试学院测试大咖公开课<微信小程序自动化测试>图文整理精华版. 随着微信小程序的功能和生态日益完善,很多公司的产品业务形态逐渐从 App 延升到微信小程序.微信公众号等.小程 ...
- WordCloud教程(上)
先贴代码: import wordcloud,jieba with open('datas/1.txt') as rt:#,encoding='utf-8' comment_text=rt.read( ...
- Goland远程连接Linux开发调试
参考链接: https://blog.csdn.net/huwh_/article/details/77879152?utm_source=blogxgwz3 https://baijiahao.ba ...
- 使用Seq搭建免费的日志服务
Seq简介 Seq是老外开发的一个针对.NET平台非常友好的日志服务.支持容器部署,提供一个单用户免费的开发版本. 官网:https://datalust.co/seq 使用文档:https://do ...
- 看视频常见的 720p、1080p、4k,这些分辨率到底包含了什么
从早期的420p,到后来的720p,到现在的非1080p不看.视频的清晰度飞快提升,但是在看到色彩越来越丰富清晰度越来越高的画面时,你有关注过他们的到底是怎么做到的么?我们一起来了解一下吧. 想必大家 ...
- P1227 【[JSOI2008]完美的对称】
这道题,先讲一下我的做题思路 这道题的最主要的目的就是算出中心,我下面称为中点.这个中点其实很好算的,我们只需要算出最左下角的坐标和最右上角的坐标,然后用中点坐标公式算出来就ok了,那么这道题就做完了 ...
- 【转】Echarts 数据绑定
Echarts 数据绑定 简单的统计表已经可以生成,不过之前图标数据都是直接写在参数里面的,而实际使用中,我们的数据一般都是异步读取的.EChart.js对于数据异步读取这块提供了异步加载的方法. 绑 ...
- .NET Core3.1 Dotnetty实战第二章
一.概要 在上一篇文章讲到Dotnetty的基本认识,本文这次会讲解dotnetty非常核心的模块是属于比较硬核的干货了,然后继续往下讲解如何根据自己的需求或者自己的喜好去配置Dotnetty而不是生 ...
- laravel在视图中使用类似于“__PUBLIC__”,“__UPLOADS__”的操作
首先在config文件夹下建立static.php文件 然后在里面定义常量 例: <?php define('__PUBLIC__', '/'); define('__UPLOADS__', ' ...