随笔- 58 文章- 0 评论- 2 阅读- 10万

elementUI 表格根据字段合并单元格行

效果

    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.rowSpanField.indexOf(column.property) > -1) {
        return {
          rowspan: row["rowspan" + column.property],
          colspan: 1
        };
      }
    },
    setrowspans() {
      // 先给所有的数据都加一个v.rowspan = 1
      this.tableData.forEach(v => {
        this.rowSpanField.forEach(key => {
          v["rowspan" + key] = 0;
        });
      });

      this.rowSpanField.forEach(key => {
        let sort = 0;
        for (let i = 0; i < this.tableData.length; i++) {
          sort = this.getRepeatNumber(i, this.tableData, key, 1);
          this.tableData[i]["rowspan" + key] = sort;
          i = i + sort - 1;
        }
      });
    },
    /**
     *
     * @param {*} i 数组当前位置
     * @param {*} data 要搜索的数组
     * @param {*} key 数组对象中搜索的字段
     * @param {*} number 返回连续长度
     * @returns 根据数组对象中位置，某个属性字段得到当前这个字段连续重复出现的次数
     */
    getRepeatNumber(i, data, key, number = 0) {
      let j = i + 1 < data.length ? i + 1 : data.length - 1;
      if (data[i][key] == data[j][key]) {
        number++;
        if (j >= data.length - 1) {
          return number;
        } else {
          return this.getRepeatNumber(j, data, key, number);
        }
      }
      return number;
    }

computed：
 
 
rowSpanField() {
      switch (Number(this.method)) {
        case 0:
          return ["organizationName", "dataType"];
        case 1:
          return ["dataType", "resolution"];
        case 2:
          return ["resolution", "dataType"];
      }
    }
 
 
 
html：
 <el-table :span-method="arraySpanMethod"></el-table >