ElementUi表格组件实现分页记忆选中

153 阅读1分钟

需求:选中时页面对表格中某个属性进行汇总展示;最后提交接口时将选中的标识集合传到后端;

表格内容:

<el-table
              ref="multipleTable"
              :data="tableData"
              stripe
              highlight-current-row
              height="705"
              size="small"
              @select="selectMethods"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="55"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="consName"
                align="center"
                label="用户名称"
              ></el-table-column>
              <el-table-column
                prop="consNo"
                align="center"
                label="用户编号"
              ></el-table-column>
              <el-table-column
                prop="drCap"
                align="center"
                label="容量"
              ></el-table-column>
            </el-table>   

data:

    allSelection: [], // 所有选中的行数
    multipleSelection: [], // table组件当前页选中

计算属性(用于展示选中行数容量汇总):

    // 选中的容量总和
   sumDemandCap() {
     return this.allSelection.reduce((x, y) => {
       return x + Number(y.drCap)
     }, 0)
   },
   // 每行的唯一标识
   idKeys() {
     return this.allSelection.map((item) => item.consNo)
   },

方法:

// 设置选中的方法
    setSelectRow() {
      if (!this.allSelection || this.allSelection.length <= 0) {
        return
      }
      // 标识当前行的唯一键的名称
      let selectAllIds = this.idKeys
      this.$refs.multipleTable.clearSelection()
      for (var i = 0; i < this.tableData.length; i++) {
        if (selectAllIds.indexOf(this.tableData[i]['consNo']) >= 0) {
          // 设置选中,记住table组件需要使用ref="table"
          this.$refs.multipleTable.toggleRowSelection(this.tableData[i], true)
        }
      }
    },
    //用户列表选中结果
    handleSelectionChange(val) {
      this.allSelection.push.apply(this.allSelection, val)
      let tempArr = this.allSelection
      this.allSelection = commonMethods.deteleObject(tempArr)
      this.multipleSelection = this.allSelection
      //this.DrDventInvitInsert("shijian")
    },
    // 选中当前行的方法
    selectMethods(val, row) {
      let ary = this.allSelection
      for (var i = 0; i < ary.length; i++) {
        if (ary[i].consNo == row.consNo) {
          ary.splice(i, 1)
        }
      }
      this.allSelection = ary
    },
    // 剔除所有选中行数中重复的数据
    deteleObject(obj) {
    var uniques = [];
    var stringify = {};
    for (var i = 0; i < obj.length; i++) {
      var keys = Object.keys(obj[i]);
      keys.sort(function (a, b) {
        return (Number(a) - Number(b));
      });
      var str = '';
      for (var j = 0; j < keys.length; j++) {
        str += JSON.stringify(keys[j]);
        str += JSON.stringify(obj[i][keys[j]]);
      }
      if (!stringify.hasOwnProperty(str)) {
        uniques.push(obj[i]);
        stringify[str] = true;
      }
    }
    //  uniques = uniques;
    return uniques;
  }