elementui 的table实现列合并

实现效果如下，根据后端接口返回的数据，功能需求编号相同的实现行合并

实现代码如下：

<template>
  <div>
    <j-table
      ref="table"
      v-loading="loading"
      :data="tableData"
      :span-method="arraySpanMethod"
      :request="getTableList"
      :mergeList="['issueKey']"
      table-key="orderTestCase"
    >
      <div slot="actions">
        <el-button
          type="primary"
          icon="el-icon-video-play"
          @click="doCase"
          v-if="showEdit"
          >执行案例</el-button
        >
        <!-- :disabled="!$auth('ProductionM_productionOrder_doTestCase')" -->
      </div>

      <template>
        <el-table-column prop="issueKey" label="功能需求" />
        <el-table-column prop="caseID" label="案例编号" show-overflow-tooltip />
        <el-table-column prop="name" label="案例标题">
          <template slot-scope="scope">
            {{ scope.row.name || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="intent" label="测试意图" show-overflow-tooltip />
        <el-table-column prop="negative" label="性质" show-overflow-tooltip>
          <template slot-scope="scope">
            <div
              v-if="scope.row.negative === true || scope.row.negative === 1"
              class="negative"
            >
              <i class="j-icon-zheng color-success mr-1"></i><span>正例</span>
            </div>
            <div
              v-if="scope.row.negative === false || scope.row.negative === 0"
              class="negative"
            >
              <i class="j-icon-fan color-danger mr-1"></i><span>反例</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="level" label="用例等级" show-overflow-tooltip>
          <template slot-scope="scope">
            <JPriority v-model="scope.row.level" />
          </template>
        </el-table-column>
        <el-table-column
          prop="reviewStatus"
          label="评审状态"
          show-overflow-tooltip
        />
        <el-table-column prop="count" label="执行次数" show-overflow-tooltip />
      </template>
    </j-table>
  </div>
</template>

<script>
import { apiPrdGetTestCase } from "@/api/prd";

export default {
  props: {
    orderId: {
      type: String,
      default: undefined,
    },
    showEdit: {
      type: Boolean,
    },
  },
  data() {
    return {
      tableData: [],
      loading: false,

      orderInfo: {},
      classMap: {},

      spanArr: [],
    };
  },
  // mounted(){
  //   this.tableData
  // },

  methods: {
    //合并单元格
    arraySpanMethod({ row, column }) {
      const span = column["property"] + "-span";
      if (row[span]) {
        return row[span];
      }
    },
    doCase() {
      this.$router.push({
        name: "workorder_testCase",
        params: {
          workOrderSystemId: this.$route.params.id,
          type: this.$route.params.type,
        },
      });
    },

    async getTableList() {
      this.loading = true;
      const { data, success, message } = await apiPrdGetTestCase({
        workOrderSystemId: this.$route.params.id,
      });
      this.loading = false;
      if (!success) {
        this.$message.warning(message);
        return;
      }
      this.tableData = data;
    },

    async tableDel(row) {
      await this.$confirm(`确定删除[${row.name}]需求吗?`, "提示", {
        type: "warning",
      })
        .then(async (actions) => {
          const { success, message } = await apiPrdWorkOrderSystemIssueDel({
            ids: row.id,
          });
          if (!success) {
            return this.$message.error(message);
          }
          this.$message.success(message);
          this.getTableList();
        })
        .catch(() => {});
    },
  },
};
</script>


<style lang="scss" scoped>
.negative {
  display: flex;
  justify-content: left;
  align-items: left;
  i {
    font-size: 20px;
  }
}
</style>

其中控制行合并的是：
:span-method=“arraySpanMethod"里的arraySpanMethod方法
:mergeList=”[‘issueKey’]"标识合并的是哪一列