element-ui 组件的 table 复选框,翻页记忆功能

需求:

1.表格多选
2.支持翻页
3.支持当前页全选

效果如下:

IMG.jpeg

思路:

1.将每页全部选中的数据存放到一个数组中
2.将当前页码选中的数据存到一个数组中
3.获取一个键值,标识当前行的唯一键的名称

实现:

1.初始化数据
                driver_id:[],
                multipleSelectionAll:[],//所有选中的数据包含跨页数据
                multipleSelection:[],// 当前页选中的数据
                idKey: 'driver_id', // 标识列表数据中每一行的唯一键的名称
            
2.复选框改变时的事件
  //复选框
        handleSelectionChange(val){
            let driver_ids =[];
            val.map(item =>{
              driver_ids.push(item.driver_id);
            })
            this.form.sels = driver_ids.join(',');
            this.driver_id = driver_ids
            this.multipleSelection = val;
            this.multipleSelectionAll = Array.from(new Set(this.multipleSelectionAll.concat(driver_ids)));  // 去重
            //实时记录选中的数据
            setTimeout(()=>{
                this.changePageCoreRecordData();
            }, 50)
          },

3.翻页记忆核心部分:

// 记忆选择核心方法
          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,index)=>{
                  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;
                          }
                      }
                  }
              })
              let driver_id =[];
              this.multipleSelectionAll.map(item => {
                driver_id.push(item.driver_id);
              })
              this.form.sels = driver_id.join(',');
              if(this.multipleSelectionAll.length > this.total) {
                let ID = this.multipleSelectionAll[this.multipleSelectionAll.length - 1].driver_id
                
                this.tableData.forEach(row=>{
                  if(row.driver_id == ID) {
               this.$refs.multipleTable.toggleRowSelection(row);  //实现打钩
                  }
                })
              }   
          },
4.请求翻页重新取得数据时再次勾选上记忆中的选项
       setSelectRow() {
            if (!this.multipleSelectionAll || this.multipleSelectionAll.length < 0) {
                return;
            }
            // 标识当前行的唯一键的名称
            let idKey = this.idKey;
            let that = this;
            if(this.selectAllIds!=null){
            this.$refs.multipleTable.clearSelection();
            for(var i = 0; i < this.tableData.length; i++) {                    
                if (this.selectAllIds.indexOf(this.tableData[i][idKey]) >= 0) {
                    // 设置选中,记住table组件需要使用ref="multipleTable"
                    this.$refs.multipleTable.toggleRowSelection(this.tableData[i], true);
                }
            }
          }
        },

前端小白一枚,希望能够帮到你,欢迎留言评论!
喜欢的点赞和关注哦!!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、文本框为字符型 必填项非空校验: 1、必填项未输入--程序应提示错误; 2、必填项只输入若干个空格,未输入其它...
    许小小晴阅读 4,675评论 0 2
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,019评论 3 119
  • 都说在他乡的人,或多或少会有些孤寂和难过。身在异地,心念亲人,一种难以排遣的苦闷总是会在某一个瞬间,挑动你...
    温馨的浅笑阅读 580评论 2 7
  • 1.遇到喜欢的女孩要主动 工作半年以来遇到自己真心喜欢的女孩,对女孩的喜欢一直潜藏在内心之中,不敢流露,不敢...
    简单的已习惯阅读 766评论 0 0
  • 第三十三章 “徐艾,你在干嘛呢?”郭正一反常态很早就给徐艾打了一个电话,徐艾正在去食堂的路上,看见郭正的来电迟疑了...
    chief风阅读 1,206评论 0 6