element表格行合并

效果 ↓

span-method 用法去看element文档，合并第一列的区域字段

 <el-table :data="tableData.lgLevelAreaMgmtVOList" :span-method="objectSpanMethod" style="width: 100%;" border empty-text="暂未查到匹配条件的数据" :row-style="{height:'40px'}" :cell-style="{padding:'0px'}">
          <el-table-column show-overflow-tooltip prop="areaCode" label="区域" align="center" width="150"></el-table-column>
          <el-table-column show-overflow-tooltip prop="weight" label="重量（kg）" align="center" width="150">
            <template slot-scope="scope">
              <el-input size="mini" v-model="scope.row.weight" placeholder="重量（kg）" maxlength="100"></el-input>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="volume" label="体积（cm³）" align="center" width="150">
            <template slot-scope="scope">
              <el-input size="mini" v-model="scope.row.volume" placeholder="体积（cm³）" maxlength="100"></el-input>
            </template>
          </el-table-column>
        </el-table>

objectSpanMethod 方法具体操作 spanArr 不要忘记声明哦~

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },

getSpanArr 这个方法在获取数据的接口里面调用，把 areaCode 相同的值合并起来

getSpanArr() {
      this.spanArr = [];
      let contactDot = 0;
      this.tableData.lgLevelAreaMgmtVOList.forEach((item, index) => {
        if (index == 0) {
          this.spanArr.push(1);
        } else {
          if (
            item.areaCode ==
            this.tableData.lgLevelAreaMgmtVOList[index - 1].areaCode
          ) {
            this.spanArr[contactDot] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            contactDot = index;
          }
        }
      });
    },