el-table合并单元格

这个是后端返回的数据结构，按id字段，把相同内容的单元格的进行合并

<el-table
        border
        v-loading="tableLoading"
        element-loading-text="数据加载中"
        :data="tableData"
        :span-method="mergeRows"
        :height="tableMaxHeight">
        <el-table-column type="selection" prop="index" width="55"></el-table-column>
        <el-table-column label="序号" prop="index" width="50" fixed="left"></el-table-column>
        <el-table-column label="单据编号" prop="documentCode" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="单据类型" prop="documentType" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.document_type" :value="scope.row.documentType"></dict-tag>
          </template>
        </el-table-column>
        <el-table-column label="单据日期" prop="documentDate" min-width="120" :show-overflow-tooltip="true" />
        <el-table-column label="单据状态" prop="status" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.document_status" :value="scope.row.status"></dict-tag>
          </template>
        </el-table-column>
        <el-table-column label="物料编码" prop="partCode" min-width="100" :show-overflow-tooltip="true" />
        <el-table-column label="物料名称" prop="partName" :show-overflow-tooltip="true" />
        <el-table-column label="申购数量" prop="quantityNum" :show-overflow-tooltip="true" />
        <el-table-column label="项目主数据" prop="projectData" min-width="110" :show-overflow-tooltip="true" />
        <el-table-column label="项目名称" prop="projectName" :show-overflow-tooltip="true" />
        <el-table-column label="申请人员" prop="applicant" min-width="100" :show-overflow-tooltip="true" />
        <el-table-column label="申请部门" prop="deptName" min-width="120" :show-overflow-tooltip="true" />
        <el-table-column label="采购人员" prop="purchasePerson" min-width="120" :show-overflow-tooltip="true" />
        <el-table-column label="已转采购数" prop="convertedNum" min-width="110" :show-overflow-tooltip="true" />
        <el-table-column label="未转采购数" prop="unconvertedNum" min-width="110" :show-overflow-tooltip="true" />
      </el-table>

data() {
    return {
        //需要合并的字段
        mergeFields: [
        "index",
        "documentCode",
        "documentType",
        "documentDate",
        "status",
        "applicant",
        "deptName",
        "purchasePerson",
        "tool"
      ],
      // 合并规则
      mergeRules: {},
    }
},
methods: {
/**
     * 计算合并规则
     * @param {String} groupKey 分组依据字段（这里用id）
     */
    calcMergeRules(groupKey) {
      const rules = {};
      // 初始化需要合并的字段规则
      this.mergeFields.forEach((field) => (rules[field] = []));
      let sameCount = 1; // 相同id的连续行数
      this.tableData.forEach((row, index) => {
        if (index === 0) {
          // 第一行默认占1行
          this.mergeFields.forEach((field) => rules[field].push(1));
        } else {
          // 判断与上一行是否同组
          const isSameGroup = row[groupKey] === this.tableData[index - 1][groupKey];
          if (isSameGroup) {
            sameCount++;
            // 当前行设为0（不显示），上一行累加
            this.mergeFields.forEach((field) => {
              rules[field].push(0);
              rules[field][index - sameCount + 1] = sameCount;
            });
          } else {
            // 不同组则重置计数
            sameCount = 1;
            this.mergeFields.forEach((field) => rules[field].push(1));
          }
        }
      });

      return rules;
    },

    /**
     * 合并单元格方法
     */
    mergeRows({ column, rowIndex }) {
      // 找到当前列对应的字段
      const field = column.property;
      // 如果是需要合并的字段，则应用规则
      if (this.mergeFields.includes(field)) {
        const rowspan = this.mergeRules[field][rowIndex];
        return { rowspan, colspan: rowspan > 0 ? 1 : 0 };
      }
      // 不需要合并的列返回默认值
      return { rowspan: 1, colspan: 1 };
    },
    // 调接口获取数据
    getList() {
      this.tableLoading = true;
      queryPurchaseReqList(this.queryParams)
        .then((res) => {
          if (res.code === 200) {
            this.tableData = res.rows || [];
            this.total = res.total;
            this.tableLoading = false;
            // 初始化合并规则（按id分组）
            this.mergeRules = this.calcMergeRules("id");
          }
        })
        .catch((err) => null);
    },
}

效果

通过以上方法就能实现合并了，主要用到了el-table的  span-method

这世界很喧嚣，做你自己就好