element ui 的table单元格合并

element ui中的table表格数据是动态生成的，如果说后台要求我们对单元格进行合并，这个时候需要借助一个api,:span-method="arraySpanMethod",arraySpanMethod为我们自己编写的合并单元格的方法。

下图是我在项目中合并的单元格

数据都是从那后拿到的，话不多说直接上代码教大家

1.先在data中定义数据，合并几列就定义几个数组和索引

      spanArr: [], //合并医院
      pos: 0, //合并医院索引
      dateArr: [], //合并日期
      dateIndex: 0, //合并日期索引
      deptArr: [], //合并送检科室
      deptIndex: 0, //合并送检科室索引
      cateArr: [], //合并项目分类
      cateIndex: 0, //合并项目分类索引
      patientArr: [], //合并患者类别
      patientIndex: 0, //合并患者类别索引

 2.接下来定义合并的函数，并编写代码

merge方法中的data是你table的数据源，我这里的逻辑是以第一行为基准一层层对比

 // 初始化合并行数组
    mergeInit() {
      this.spanArr = []; //合并医院
      this.pos = 0; //合并医院索引
      this.dateArr = []; //合并日期
      this.dateIndex = 0; //合并日期索引
      this.deptArr = []; //合并送检科室
      this.deptIndex = 0; //合并送检科室索引
      this.cateArr = []; //合并项目分类
      this.cateIndex = 0; //合并项目分类索引
      this.patientArr = []; //合并患者类别
      this.patientIndex = 0; //合并患者类别索引
    }, 
//  合并表格
    merge(data) {
      this.mergeInit();
      if (data.length > 0) {
        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            //第一行必须存在，以第一行为基准
            this.spanArr.push(1); //合并医院
            this.pos = 0;

            this.dateArr.push(1); //合并日期
            this.dateIndex = 0;

            this.deptArr.push(1); //合并送检科室
            this.deptIndex = 0;

            this.cateArr.push(1); //合并项目分类
            this.cateIndex = 0;

            this.patientArr.push(1); //合并患者类别
            this.patientIndex = 0;
          } else {
            // 判断当前元素与上一元素是否相同
            // 合并医院列
            if (data[i].request_org_name == data[i - 1].request_org_name) {
              this.spanArr[this.pos] += 1;
              this.spanArr.push(0);
            } else {
              this.spanArr.push(1);
              this.pos = i;
            }

            // 合并日期列
            if (
              data[i].date == data[i - 1].date &&
              data[i].request_org_name == data[i - 1].request_org_name
            ) {
              this.dateArr[this.dateIndex] += 1;
              this.dateArr.push(0);
            } else {
              this.dateArr.push(1);
              this.dateIndex = i;
            }

            // 合并送检科室列
            if (
              data[i].request_dept_name == data[i - 1].request_dept_name &&
              data[i].date == data[i - 1].date
            ) {
              this.deptArr[this.deptIndex] += 1;
              this.deptArr.push(0);
            } else {
              this.deptArr.push(1);
              this.deptIndex = i;
            }

            // 合并患者类别
            if (
              data[i].patient_class == data[i - 1].patient_class &&
              data[i].request_dept_name == data[i - 1].request_dept_name
            ) {
              this.patientArr[this.patientIndex] += 1;
              this.patientArr.push(0);
            } else {
              this.patientArr.push(1);
              this.patientIndex = i;
            }

            // 合并项目分类
            if (
              data[i].exam_item_category == data[i - 1].exam_item_category &&
              data[i].patient_class == data[i - 1].patient_class && 
              data[i].request_dept_name == data[i - 1].request_dept_name
            ) {
              this.cateArr[this.cateIndex] += 1;
              this.cateArr.push(0);
            } else {
              this.cateArr.push(1);
              this.cateIndex = i;
            }
          }
        }
      }
    },

 最后进行单元格的合并啦

//  合并单元格
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      const len = this.tableData.length;
      const t=this.columns.length
      if (columnIndex === 0) {
        //第一列 医院
        const _row_1 = this.spanArr[rowIndex];
        const _col_1 = _row_1 > 0 ? 1 : 0;
        return {
          rowspan: _row_1,
          colspan: _col_1,
        };
      } else if (columnIndex === 1) {
        // 第二列 日期
        const _row_2 = this.dateArr[rowIndex];
        const _col_2 = _row_2 > 0 ? 1 : 0;
        return {
          rowspan: _row_2,
          colspan: _col_2,
        };
        // 第三列 科室
      } else if (columnIndex === 2) {
        const _row_3 = this.deptArr[rowIndex];
        const _col_3 = _row_3 > 0 ? 1 : 0;
        return {
          rowspan: _row_3,
          colspan: _col_3,
        };
        // 第五轮 项目分类
      } else if (columnIndex === 4) {
        const _row_4 = this.cateArr[rowIndex];
        const _col_4 = _row_4 > 0 ? 1 : 0;
        return {
          rowspan: _row_4,
          colspan: _col_4,
        };
        // 第四列 患者类别
      } else if (columnIndex === 3) {
        const _row_5 = this.patientArr[rowIndex];
        const _col_5 = _row_5 > 0 ? 1 : 0;
        return {
          rowspan: _row_5,
          colspan: _col_5,
        };
      } else if (columnIndex === t) {
        const _row_6 = len;
        const _col_6 = 1;
        return {
          rowspan: _row_6,
          colspan: _col_6,
        };
      }else if(rowIndex === len){
        return {
          rowspan:1,
          colspan:1
        }
      }
    },