elementUI表格合并单元格详解

相信你肯定看了 ElementUI 官方文档了，没看的话先去看下表格各个属性的意义，方便下文阅读：传送门

但你会发现此例过于简单，死数据，但我们开发的时候往往都是后台传递过来的数据，导致我们 rowspan 的参数需要自己做判断，根据数据的相同行（或列）进行合并；

我们先看下结果：

<template>
  <div>
      <el-table
        v-loading="loading"
        :data="tableData"
        :span-method="objectSpanMethod"
        border>
        <!--班次-->
        <el-table-column prop="line_name" :label="$t('ms_shift')" />
        <!--班车类型-->
        <el-table-column prop="audit_type_text" :label="$t('ms_bus_type')" />
        <!--车辆类型-->
        <el-table-column
          prop="car_type_text"
          :label="$t('page.operation.table.column_car_type_label')"
        />
        <!--加班车线路-->
        <el-table-column
          prop="estimate_start_time"
          :label="$t('page.operation.table.add_shuttle_route')"
        />
        <!--网点名称-->
        <el-table-column
          prop="start_store_short_name"
          :label="$t('page.quicktools.weightinfo_store_name')"
        />
        <!--运载量/件装载率-->
        <el-table-column
          prop="capacity_text"
          :label="$t('ms_bus_load_or_percent')"
        />
        <!--发车时间-->
        <el-table-column
          prop="actual_start_time"
          :label="$t('page.operation.table.column_departure_time_label')"
        />
        <!--到车时间-->
        <el-table-column
          prop="estimate_end_time"
          :label="$t('ms_expect_arrived_time')"
        />
        <!--班车状态-->
        <el-table-column prop="car_state_text" :label="$t('ms_bus_status')">
          <template slot-scope="scope">
            <el-button
              round
              size="mini"
              :style="STATUSENUMSTYLE.get(scope.row.car_state_text)"
              >{{ scope.row.car_state }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
  </div>
</template>

<script>

export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          start_store_short_name: "测试网点1",
          actual_start_time: null,
          audit_type_text: "普通加班车",
          car_state_text: 1,
          car_type_text: "6W6.5",
          estimate_end_time: null,
          estimate_start_time: null,
          line_name: 12,
          car_state: "通过"
        },
        {
          id: 1,
          start_store_short_name: "测试网点2",
          actual_start_time: null,
          audit_type_text: "普通加班车",
          car_state_text: 12,
          car_type_text: "6W6.5",
          estimate_end_time: null,
          estimate_start_time: null,
          line_name: 12,
          car_state: "通过"
        },
        {
          id: 1,
          start_store_short_name: "测试网点3",
          actual_start_time: null,
          audit_type_text: "普通加班车",
          car_state_text: 12,
          car_type_text: "6W6.5",
          estimate_end_time: null,
          estimate_start_time: null,
          line_name: 12,
          car_state: "通过"
        },
        {
          id: 1,
          start_store_short_name: "测试网点4",
          actual_start_time: null,
          audit_type_text: "普通加班车",
          car_state_text: 12,
          car_type_text: "6W6.5",
          estimate_end_time: null,
          estimate_start_time: null,
          line_name: 12,
          car_state: "通过"
        }
      ],
      spanArr: [4,0,0,0],
    };
  },
  mounted(){
  this.rowspan();
  },
  methods: {
     rowspan() {
      let position=0;
      this.listData.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1);
          position = 0;
        } else {
          if (this.listData[index].id=== this.listData[index - 1].id) {
            this.spanArr[position] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            position = index;
          }
        }
      });
    },
    /**
     * @param row 当前行
     * @param column 当前列
     * @param rowIndex 当前行号，第几行
     * @param columnIndex 当前列号
     * @returns {{rowspan: number, colspan: number}}
     */
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex < 4) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    }
  }
};
</script>
<style scope lang="less"></style>

 详细说明：

:span-method="objectSpanMethod"  

这个是官方给定的绑定属性和对应的方法，objectSpanMethod 传入了 { row, column, rowIndex, columnIndex }
row: 当前行
column: 当前列
rowIndex：当前行号
columnIndex ：当前列号
该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。

this.spanArr 数组 ，返回的是相对应的行合并行数

这个示例打印出的this.spanArr为 [3, 0, 0, 3, 0, 0]，比如，第一个元素为3，表示第一行应该向下合并3行（即第一行的rowspan为3），第二个元素的rowspan为0，就让它“消失”。

rowspan（）这个函数就是用来返回 this.spanArr 数组的，定义每一行的 rowspan

rowspan（）函数，if( index === 0)，第一行，直接先给数组push进一个1，表示自己先占一行，this.position是数组元素的位置（此时是从数组元素的第一个开始，所以this.position为0）， this.position为0意思表示的就是数组的第一个元素。

当到了index为2的时候，if(this.listData[index].type === this.listData[index-1].type )，让第二行与第一行作比较，

如果第二行与第一行相等的话，this.position就+1，当有n行第一行相同，this.position就为n，表示向下合并n行；第二行自己就this.spanArr.push(0)，表示第二行“消失”，因为第一行和第二行合并了啊。

如果第二行与第一行不相等的话，那么this.spanArr.push(1);就让第二行自己独占一行；this.position = index意思就是把指针拿到index这行来，表示设置数组this.spanArr[this.position]的元素值，然后定义从此行开始向下合并几行（可能这句话我表述的不是很清楚你可以根据我这个示例研究下，当index为3时，this.position为3，当index为4时，第四行与第三行需要合并，那么在数组的this.position元素就要+1了，也就是this.spanArr[this.position] += 1）

还有最后一句话

const _col = _row>0 ? 1 : 0;

定义的这一个单元格列的合并，我们项目只合并行，不合并列；

_row：代表合并行的行数，_row的值要么是1，或者更大的自然正整数，要么是0。

1代表：独占一行

更大的自然数：代表合并了若干行

0：代表“消失”的哪那一个单元格，后面的单元格向前推一格