基于element-ui的table组件封装的合并列组件（很灵活）

引用
<spanTable
          ref="spanTable"
          :table-data="tableData"
          :table-item-list="tableItemList"
          :span-object="spanObject"
          :column-index-list="columnIndexList"
          :span-prop-list="spanPropList"
        />

 tableData: [],
 tableItemList: [...userData.moveTableItem],
 spanObject: {
     spanArr1: [],
     position1: 0，
     spanArr2: [],
     position2: 0，
     spanArr9: [],
     position9: 0
 },
 columnIndexList: [1，2，9],
 spanPropList: ['projectName'],

<!--
 * @Descripttion:
 * @version:
 * @Author: zhengyangyang
 * @Date: 2022-07-06 16:03:02
 * @LastEditors: zhengyangyang
 * @LastEditTime: 2022-07-13 17:08:40
-->
<template>
  <el-table
    ref="tableData"
    :data="tableData"
    :span-method="objectSpanMethod"
    height="calc(100% - 80px)"
    border
    style="width: 100%; margin-top: 20px"
  >
    <el-table-column type="index" width="80px" align="center">
      <template slot="header" slot-scope="scope">
        <span>序号</span>
      </template>
    </el-table-column>
    <el-table-column
      v-for="(item, index) in tableItemList"
      :key="index"
      :prop="item.prop"
      :label="item.label"
      show-overflow-tooltip
      min-width="180"
      align="center"
    />
  </el-table>
</template>

<script>
export default {
  name: "TrialGcpWebUserDetail",
  props: {
    /**
     * 合并单元格封装
     * @param {Array}  tableData 表格数据
     * @param {Array}  tableItemList 表格头数组
     * @param {Object}  spanObject 合并变量对象 存放需要合并的位置
     *                   spanObject: {
                                      spanArr+合并列的下标: [],
                                      position+合并列的下标: 0,
                                      spanArr1:[],
                                      position1:0,
                                      spanArr5:[],
                                      position5:0
                                    },
                                有多个列需要合并 需要定义多个对应的spanArr position
     * @param {Array}  columnIndexList 合并列的下标数组  columnIndexList: [1,5],
     * @param {Array}  spanPropList 表格数据中 值相同的key 用于比较合并 spanPropList: ['projectName'],
     */
    tableData: {
      type: Array,
      default() {
        return [];
      },
    },
    tableItemList: {
      type: Array,
      default() {
        return [];
      },
    },
    spanObject: {
      type: Object,
      default() {
        return {};
      },
    },
    columnIndexList: {
      type: Array,
      default() {
        return [];
      },
    },
    spanPropList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      span: this.spanObject,
    };
  },
  watch: {
    tableData: {
      deep: true,
      handler() {
        this.onMergeLines();
      },
    },
    spanObject: {
      deep: true,
      handler() {
        this.span = this.spanObject;
      },
    },
  },
  activated() {
    this.$nextTick(() => {
      this.$refs.tableData.doLayout();
    });
  },
  created() {},
  mounted() {},
  methods: {
    objectSpanMethod({ rowIndex, columnIndex }) {
      for (let index = 0; index < this.columnIndexList.length; index++) {
        const colIndex = this.columnIndexList[index];
        if (columnIndex === colIndex) {
          const _row = this.span[`spanArr${colIndex}`][rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col,
          };
        }
      }
    },
    onMergeLines() {
      // 每次执行需要充值数据
      Object.keys(this.span).forEach((v) => {
        if (v.indexOf("spanArr") !== -1) {
          this.span[v] = [];
        }
        if (v.indexOf("position") !== -1) {
          this.span[v] = 0;
        }
      });
      this.tableData.forEach((item, index) => {
        if (index === 0) {
          Object.keys(this.span).forEach((v) => {
            if (v.indexOf("spanArr") !== -1) {
              this.span[v].push(1);
            }
            if (v.indexOf("position") !== -1) {
              this.span[v] = 0;
            }
          });
        } else {
          for (let idx = 0; idx < this.spanPropList.length; idx++) {
            const prop = this.spanPropList[idx];
            // 判断当前元素与上一个元素是否相同
            if (
              this.tableData[index][prop] === this.tableData[index - 1][prop]
            ) {
              this.span[`spanArr${this.columnIndexList[idx]}`][
                this.span[`position${this.columnIndexList[idx]}`]
              ] += 1;
              this.span[`spanArr${this.columnIndexList[idx]}`].push(0);
            } else {
              this.span[`spanArr${this.columnIndexList[idx]}`].push(1);
              this.span[`position${this.columnIndexList[idx]}`] = index;
            }
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.detail {
  padding: 20px 25px;
}
</style>