我们再用vue和element-ui,或者其他的表格的时候,可能需要能记忆翻页勾选,那么实现以下几个方法就ok了

示例如下

<el-table :data="tableData" ref="table" @selection-change="handleSelectionChange">
<el-table-column type="selection"></el-table-column>
<el-table-column prop="personName" label="客户名称"></el-table-column>
<el-table-column prop="telphone" label="手机号"></el-table-column>
<el-table-column prop="idNo" label="身份证号"></el-table-column>
<el-table-column prop="linkTypes" label="客户身份"></el-table-column>
</el-table>
<el-pagination :page-size="pagination.pageSize" @current-change="currentChange"
:current-page="pagination.pageNumber"
:page-sizes="pagination.pageSizes"
:total="pagination.totalRows"
@size-change='sizeChange'>
</el-pagination>

首先定义个data值

data () {
return {
multipleSelectionAll: [], // 所有选中的数据包含跨页数据
multipleSelection: [], // 当前页选中的数据
   idKey: 'personId', // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
tableData: [] // 表格数据
    // 此处省略pagination的定义
}
}

方法中定义以下:

methods : {
// 设置选中的方法
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"
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;
}
}
}
})
},
currentChange(val){
// 改变页的时候调用一次
this.changePageCoreRecordData();
         this.pagination.pageNumber = val;
         this.query();
       }, sizeChange(val){ // 改变每页显示条数的时候调用一次 
         this.changePageCoreRecordData();
         this.pagination.pageSize = val;
         this.query();
},
            handleSelectionChange (val) {
// table组件选中事件,记得加上@selection-change="handleSelectionChange"
this.multipleSelection = val;
},
query () {
// 分页查询数据方法,在成功返回数据方法里调用setSelectRow方法,使每次分页查询都能勾选中
$.ajax({...,
success:(res)=>{
......
setTimeout(()=>{
this.setSelectRow();
}, 200)
}
})
},
       // 得到选中的所有数据
getAllSelectionData () {

           // 再执行一次记忆勾选数据匹配,目的是为了在当前页操作勾选后直接获取选中数据

          this.changePageCoreRecordData();
         console.log(this.multipleSelectionAll)
}
}

如果你的是自定义组件dialog弹窗里面的表格选择,如果想每次打开想选中,那么就直接在props加一个值,然后加一个watch

props: [ "selectData"],
watch: {
'selectData' (val) {
this.multipleSelectionAll = val;
}
},

 上传到了GitHub上一个示例,可供参考

https://github.com/wanglu05/element-ui-memory-page/

Element ui 中使用table组件实现分页记忆选中的更多相关文章

  1. element ui中表格table翻页记忆勾选状态

    <el-table ref="multipleTable" :data="datalist" style="width:100%" @ ...

  2. 关于Element UI中页面样式小问题

    一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...

  3. 关于Element UI中select组件中遇到的问题

    问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...

  4. Element UI 中组件this.$message报错

    最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...

  5. Layui Table 分页记忆选中

    Layui Table 分页记忆选中 挺好的功能,之前为什么放弃了,哈哈哈! 在最早的版本中,layui 的 table 会记录每页的勾选状态,但很多用户反馈这是 bug,因为当他们获取选中数据时,其 ...

  6. element ui 中的 resetFields() 报错&#39;resetFields&#39; of undefined

    每次做各种form表单时,首先要注意的是初始化,但是刚开始若没有仔细看文档,则会自己写个方法将数据设置为空,但是这样就会出现一个问题,表单内存在各种验证,假如是一个弹框内有form表单,弹框出现就执行 ...

  7. iview中,table组件在缩进时产生的bug。

    问题描述: 在父元素因为缩进的关系撑开时,table组件不会因为父元素的撑开而自适应,问题如图 解决办法:在父一级的组件中使用table {width: 100% !important},强制使表格宽 ...

  8. element ui中dialog相关问题

    一,今天需要在dialog里面引入另一个页面,就是打开dialog显示该页面(把页面放到dialog中),引入的语句如下: <iframe src="view?path=rkdj_b& ...

  9. element ui中的一些小技巧

    最近写公司的项目,这项目是vue和element ui搭建的, 做的是一套电力系统的管理平台.  遇到一个小麻烦,用过element ui 的都知道,使用element ui 弹框,点击空白处,默认是 ...

随机推荐

  1. webconfig 文件加密处理

    前几日正好遇到配置文件加密解密的问题,简单记录下流程. 1.首先运行cmd然后打开Framework.cd C:\Windows\Microsoft.NET\Framework\v4.0.303192 ...

  2. html中的一些标签学习

    今天看手册学习到了HTML5很多属性.现在总结如下 <body bgcolor="BED1A2" text="FFFFFF" link="yel ...

  3. localstorage 使用

    localstorage作为HTML5的一个特殊属性,在发布时就备受关注:最近总结了其一些小的用法,希望可以抛砖引玉. 因HTML5本地存储只能存字符串,所以所有数据存储的话,都要转化成字符串:而js ...

  4. MyEclipse 8.0注冊码+原版下载_Java开发软件

    MyEclipse是一个十分优秀的用于开发Java, J2EE的Eclipse插件集合,MyEclipse的功能很强大,支持也十分广泛,尤其是对各种开元产品的支持十分不错.MyEclipse眼下支持J ...

  5. 各类模块的粗略总结(time,re,os,sys,序列化,pickle,shelve.#!json )

    ***collections 扩展数据类型*** ***re 正则相关操作 正则 匹配字符串*** ***time 时间相关 三种格式:时间戳,格式化时间(字符串),时间元组(结构化时间).***`` ...

  6. html-字体属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. PHP强大的数组函数

    <?php/** * Created by PhpStorm. * User: 63448 * Date: 2018/5/6 * Time: 21:56 */echo "<h3& ...

  8. LeetCode 461. Hamming Distance (C++)

    题目: The Hamming distance between two integers is the number of positions at which the corresponding ...

  9. c++ 宏多态 动态多态和静态多态(转载)

    转载出处:通道 多态(polymorphism)一词最初来源于希腊语polumorphos,含义是具有多种形式或形态的情形.在程序设计领域,一个广泛认可的定义是“一种将不同的特殊行为和单个泛化记号相关 ...

  10. Node.js验证码模块captchapng

    captchapng是一个基于pnglib模块开发,数字型验证码模块.内置字体.全JavaScript无其它依赖.不像有的验证码需要依赖canvas或者是需要编译,而且captchapng使用起来简单 ...