element ui table 表格合并

通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。

<el-table v-loading="loading" :data="tableData" :stripe="true" border :span-method="objectSpanMethod" :height="tableHeight">
          <el-table-column
            v-for="(item,index) in tableOptions"
            :key="index"
            :prop="item.props"
            :label="item.name"
            :formatter="formatValue">
          </el-table-column>
</el-table>

行合并统计数量,行合并数量索引根据要合并的字段数量定义，例子中需要合并类型和期数两个字段所以定义了两组 spanArr、pos，列合并统计数量及列合并数量索引同样。

data() {
    return {
      loading: false,
      tableData: [],
      tableHeight: document.body.clientHeight,
      tableOptions: [
        {
          name: '序号',
          props: 'number'
        },
        {
          name: '类型',
          props: 'typeName'
        },
        {
          name: '期数',
          props: 'periodName'
        },
        {
          name: '物业形态',
          props: 'buildTypeName'
        },
        {
          name: '建筑面积（㎡）',
          props: 'buildArea'
        },
        {
          name: '实际面积（㎡）',
          props: 'realArea'
        }
      ],
      spanArr: [],
      spanArr1: [],
      spanArrCol: [],
      pos: 0,
      pos1: 0,
      poscol: 0
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    formatValue(row, column, cellValue, index) {
      return cellValue!=null ? cellValue : '/'
    },
    getList() {
      this.getSpanArr(this.tableData);
      this.loading = true;
      getPropertyTable().then(res => {
        this.tableData = res.data.data;
        this.getSpanArr(this.tableData); //把数据添加到这个方法中
        this.total = res.total;
        this.loading = false;
      });
    },
    //获取合并配置明细
    getSpanArr(data) {
      this.spanArr = [];//行合并统计数量1
      this.pos = 0;//行合并数量索引1
      this.spanArr1 = [];//行合并统计数量2
      this.pos1 = 0;//行合并数量索引2
      // this.spanArrCol = [];//列合并统计数量1
      // this.poscol = 0;//列合并数量索引1
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          //设置table表格行号、设置合并参数，以便相同参数合并
          this.spanArr.push(1);
          this.pos = 0;
          this.spanArr1.push(1);
          this.pos1 = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].typeName === data[i - 1].typeName) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
          //将数据添加的数组重新声明
          if (data[i].typeName === data[i - 1].typeName && data[i].periodName === data[i - 1].periodName) {
            this.spanArr1[this.pos1] += 1;
            this.spanArr1.push(0);
          } else {
            this.spanArr1.push(1);
            this.pos1 = i;
          }
          //合并的是多列,将数据添加的数组要重新声明。
          // if (data[i].realArea=== data[i - 1].realArea) {
          //   this.spanArrCol[this.poscol] += 1;
          //   this.spanArrCol.push(0);
          // } else {
          //   this.spanArrCol.push(1);
          //   this.poscol = i;
          // }
        }
      }
    },
    //合并单元格
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
   		 //类型字段合并
      if (columnIndex === 1) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {rowspan: _row, colspan: _col}
      }
     	 //期数字段合并
      if (columnIndex === 2) {
        const _row = this.spanArr1[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {rowspan: _row, colspan: _col}
      }
      // if (columnIndex === 4) {
      //   const _row = this.spanArrCol[rowIndex];
      //   const _col = _row > 0 ? 1 : 0;
      //   return {rowspan: _row, colspan: _col}
      // }
    },
  }