使用element-ui 组件动态合并table的行/列

　　　　文章需求：动态实现table表格中行/列的自动合并

　　　　使用框架及UI类库：Vue+Element-ui

　　　　代码地址：https://github.com/dreamITGirl/VueProgect

　　　　最终实现的表格数据

　　　　

　　实现思路：

　　　　在table组件中，提供了一个属性:span-method,它是一个Function，本身有4个参数，分别是row,rowIndex,colum,columIndex;这四个值可以直接拿到。先处理连续相同的列的值，做标记，然后，在合并的方法中，根据我们处理好的数组，去对应的合并行或列

　　实现代码：　

//处理table数据的方法，将连续相同的数据汇总 
　　merge() {
      let OrderObj = {};
      let provinceObj = {};
      this.tableData.forEach((element, index) => {
        element.rowIndex = index;
        if (OrderObj[element.operators]) {
　　　　　　//如果下一个数据中的operators和这一列的数据相同，则合并，反之，不合并；（增加这一个判断的目的是为了防止隔行出现相同时，列合并）
          let nextItem = this.tableData[index + 1].operators
            ? this.tableData[index + 1].operators
            : undefined;
          let prevItem = this.tableData[index - 1].operators
            ? this.tableData[index - 1].operators
            : undefined;
          if (element.operators == nextItem) {
            OrderObj[element.operators].push(index);
          } else if (element.operators == prevItem) {
            OrderObj[element.operators].push(index);
          }
        } else {
          OrderObj[element.operators] = [];
          OrderObj[element.operators].push(index);
        }
        if (provinceObj[element.province]) {
          let nextPro = this.tableData[index + 1]
            ? this.tableData[index + 1].province
            : undefined;
          let prevPro = this.tableData[index - 1].province
            ? this.tableData[index - 1].province
            : undefined;
          if (element.province == nextPro) {
            provinceObj[element.province].push(index);
          } else if (element.province == prevPro) {
            provinceObj[element.province].push(index);
          }
        } else {
          provinceObj[element.province] = [];
          provinceObj[element.province].push(index);
        }
      });
      // 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）
      for (let k in OrderObj) {
        if (OrderObj[k].length > 1) {
          this.OrderIndexArr.push(OrderObj[k]);
        }
      }
      for (let i in provinceObj) {
        if (provinceObj[i].length > 1) {
          this.provinceArr.push(provinceObj[i]);
        }
      }
}

//合并的方法
objectSpanMethod({ row, rowIndex, column, columnIndex }) {
      if (columnIndex === 0) {
        for (let i = 0; i < this.OrderIndexArr.length; i++) {
          let element = this.OrderIndexArr[i];
          for (let j = 0; j < element.length; j++) {
            let item = element[j];
            if (rowIndex === item) {
              if (j === 0) {
                return {
                  rowspan: element.length,
                  colspan: 1
                };
              } else if (j !== 0) {
                return {
                  rowspan: 0,
                  colspan: 0
                };
              }
            }
          }
        }
      }
　　　　//因为需求是前两列中有相同的就合并，所以需要再次判断出来第一列中哪些行需要合并；
      if (columnIndex === 1) {
        for (let j = 0; j < this.provinceArr.length; j++) {
          let element = this.provinceArr[j];
          for (let k = 0; k < element.length; k++) {
            let item = element[k];
            if (rowIndex === item) {
              if (k === 0) {
                return {
                  rowspan: element.length,
                  colspan: 1
                };
              } else if (k !== 0) {
                return {
                  rowspan: 0,
                  colspan: 0
                };
              }
            }
          }
        }
      }
    }