zoukankan      html  css  js  c++  java
  • element ui 分页记忆checked

    <el-table
                :data="tableData"
                border
                ref="multipleTableChannel"
                @selection-change="selectChannel"
                style=" 100%">
                <el-table-column
                    type="selection"
                    width="55">
                 </el-table-column>
                 <el-table-column
                  type="index"
                  width="50"
                  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)
          }, 
    

      

  • 相关阅读:
    转dhdhtmlxTree
    转Merge的用法
    解决SqlServer2008评估期过期
    借鉴一下对比算法
    Asp.Net异常:"由于代码已经过优化或者本机框架位于调用堆栈之上,无法计算表达式的值"的解决方法
    查看Windows下引起Oracle CPU占用率高的神器-qslice
    今日有奖活动一览
    【分享】给做技术的战友们推荐一个不错的微信公号解解闷
    Unreal Engine Plugin management
    当在ECLIPSE中import现存项目时,如遇到版本不符
  • 原文地址:https://www.cnblogs.com/love314159/p/13675129.html
Copyright © 2011-2022 走看看