elementUI table合并第一行

是简书里一个大神写的，我根据自己的数据稍微改了下

效果图：

dom:

<el-table
        :data="data"
        style="width: 100%"
        :span-method="objectSpanMethod"
        border
      >
        <el-table-column prop="hotelPurpose" label="酒店用途">
        </el-table-column>
        <el-table-column prop="hotel_name" label="酒店名称"> </el-table-column>
        <el-table-column prop="personSum" width="100" label="总数">
        </el-table-column>
        <el-table-column prop="availableRoom" label="剩余可用房间">
        </el-table-column>
        <el-table-column prop="personDetail" label="人员情况">
        </el-table-column>
      </el-table>

javascript:

data() {
    return {
      data: [
        {
          hotelPurpose: '医学观察',
          hotel_name: '华安酒店',
          personSum: '132',
          availableRoom: '120',
          personDetail: '黄码20人',
        },
        {
          hotelPurpose: '中高风险',
          hotel_name: '烟台酒店',
          personSum: '132',
          availableRoom: '120',
          personDetail: '北京20人',
        },
        {
          hotelPurpose: '中高风险',
          hotel_name: '美丽酒店',
          personSum: '132',
          availableRoom: '120',
          personDetail: '南京20人',
        },
        {
          hotelPurpose: '入境类',
          hotel_name: '华安酒店',
          personSum: '132',
          availableRoom: '120',
          personDetail: '韩国20人',
        },
      ],
      dataSum: {
        hotelSum: '30',
        personSum: '1908',
        availableRoom: '203',
        personDetail: '黄码20人,北京20人,南京20人,韩国20人',
      },
      arr: [],
    };
  },


getCountsList() {
      // this.$http({
      //   url: '',
      //   method: 'get',
      // }).then((res) => {
      //   if (res.data.code * 1 === 1) {
      //     this.tableData = res.data.data;
      //   }
      // });

      let tempArr = {};
      tempArr.hotelPurpose = '合计';
      tempArr.hotel_name = this.dataSum.hotelSum;
      tempArr.personSum = this.dataSum.personSum;
      tempArr.availableRoom = this.dataSum.availableRoom;
      tempArr.personDetail = this.dataSum.personDetail;
      this.data.push(tempArr);
    },
    setTable(data, c) {
      let spanOneArr = [];
      let concatOne = 0;
      data.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
        } else {
          if (item[c] && item[c] === data[index - 1][c]) {
            //当前项和前一项比较
            spanOneArr[concatOne] += 1; //相同值第一个出现的位置，统计需要合并多少行
            spanOneArr.push(0); //新增一个被合并行
          } else {
            spanOneArr.push(1); //否则不合并
            concatOne = index; //指向位移
          }
        }
      });
      var obj = {};
      obj[c] = spanOneArr;
      this.arr.push(obj);
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log(row, column);
      if (columnIndex === 0) {
        const _row = this.arr[0].hotelPurpose[rowIndex]; //因为rowIndex出现会从1到结尾
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },

created() {
    this.getCountsList();
    //合并表格初始化 根据酒店用途字段合并
    this.setTable(this.data, 'hotelPurpose');
},

标签：tempArr,personSum,第一行,20,elementUI,personDetail,hotelPurpose,table,data
来源： https://blog.csdn.net/p930318/article/details/121204416