<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的更多相关文章

  1. vue2.0+Element UI 表格前端分页和后端分页

    之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...

  2. vue2.0 + Element UI + axios实现表格分页

    注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...

  3. element UI 饿了么 UI 分页 按钮不显示的问题

    https://blog.csdn.net/sinat_37255207/article/details/88914235 一个很坑的 深坑  element UI 的 按钮 不显示的深坑 <e ...

  4. Element UI表格组件技巧:如何简洁实现跨页勾选、跨页统计功能

    业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...

  5. vue项目使用element ui的Checkbox

    最近使用到element ui的下拉多选框Checkbox Checkbox用法可参考与于 http://element.eleme.io/#/zh-CN/component/checkbox Che ...

  6. element UI table 过滤 筛选问题

    一.问提描述    使用elementUI table 官方筛选案例,发现筛选不是服务器端筛选,而是浏览器端对每一页进行单独筛选. 如何在服务器端筛选? 二.查询Element UI 官网table组 ...

  7. Element UI样式无法修改解决方法。

    最近在做的项目中要用到Element UI组件来写,非常方便,但毕竟Element UI是有它自己的默认样式的,并不是客户所要求的,但就在我想要修改样式时遇到了棘手的问题. 如何引入和使用 Eleme ...

  8. Element ui tree树形控件获取当前节点id和父节点id

    低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...

  9. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

随机推荐

  1. Django context must be a dict ranther than Context

    1.1 错误描述 TypeError at /time/ context must be a dict rather than Context. Request Method: GET Request ...

  2. pygame绘制背景

    import pygame pygame.init() screen = pygame.display.set_mode((640,480)) # ------- background ------- ...

  3. Linux 实现密钥免密登录

    Linux 实现密钥免密登录 环境:CentOS 7 一. 创建密钥 登录Linux,进入/root/.ssh/目录下 执行ssh-keygen -t rsa创建密钥一直回车即可,因为是免密所以直接回 ...

  4. ANALYZE导致的阻塞问题分析

    背景 问题描述 DBA同学收到qps大量下降的告警,qps从2w下降到1w,然后又自动恢复了. 基于Analysis Report信息,发现有很多 STATE:Waiting for table fl ...

  5. eric4 中 pyqt .py文件结尾的 代码

    if __name__ == "__main__": import sys app = QtGui.QApplication(sys.argv) ui = MainWindow() ...

  6. Mybatis PageHelper 分页不起作用

    修改中pageHelper引用 之前: <dependency> <groupId>com.github.pagehelper</groupId> <arti ...

  7. 手把手教你使用VUE+SpringMVC+Spring+Mybatis+Maven构建属于你自己的电商系统之vue后台前端框架搭建——猿实战01

            猿实战是一个原创系列文章,通过实战的方式,采用前后端分离的技术结合SpringMVC Spring Mybatis,手把手教你撸一个完整的电商系统,跟着教程走下来,变身猿人找到工作不是 ...

  8. CSS动画实例:移动的眼珠子

    适当地利用CSS的box-shadow可以构造图形,然后可以对构造的图形添加动画效果.下面我们通过移动的眼珠子.圆珠一二三.一分为四.四小圆旋转扩散等实例来体会box-shadow属性在动画制作中的使 ...

  9. 学习lammps 对in文件的一个概述性心得(转载)

    转载自:http://muchong.com/html/201411/8149677.html 写在开头:1.尽量列举了大部分(几乎)的命令2.带星号命令非常重要,大家在看mannual中命令的解释的 ...

  10. GitHub 热点速览 Vol.34:亚马逊、微软开源项目带你学硬核技术

    作者:HelloGitHub-小鱼干 摘要:站在巨人的肩膀上才能看得更远,本周上榜的 computervision-recipes 便是典型代表,这个由微软开源的计算机视觉最佳实践项目,多次上 Git ...