elementUI 实现行合并，提取成公共方法

一，实现效果

 二，实现思路

   首先确定3种数据 1，需要合并的列。2，以哪一列为基础进行合并。3，受影响的列

三，代码展示

    代码复制可直接查看demo效果

<template>
  <div style="padding: 20px">
    <el-table :data="table" :span-method="objectSpanMethod" border>
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="checkRoom" label="checkRoom"></el-table-column>
      <el-table-column
        prop="checkProject"
        label="checkProject"
      ></el-table-column>
      <el-table-column prop="checkMoney" label="checkMoney"></el-table-column>
      <el-table-column prop="attention" label="attention"></el-table-column>
      <el-table-column
        prop="appointmentTime"
        label="appointmentTime"
      ></el-table-column>
    </el-table>
    <p>需要合并的列：checkRoom，checkMoney，attention，appointmentTime</p>
    <p>以哪列为基础进行合并：checkRoom</p>
    <p>受影响的列：attention</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      table: [
        {
          id: "1",
          checkRoom: "CTROOM",
          checkProject: "颈椎MRICT",
          checkMoney: "300.22",
          attention: "检查前空腹",
          appointmentTime: "",
        },
        {
          id: "1",
          checkRoom: "CTROOM",
          checkProject: "颈椎MRICT1",
          checkMoney: "303.22",
          attention: "检查前空腹",
          appointmentTime: "",
        },
        {
          id: "1",
          checkRoom: "CTROOM",
          checkProject: "颈椎MRICT22",
          checkMoney: "340.22",
          attention: "检查前空腹",
          appointmentTime: "2019-5-29 10:30",
        },
        {
          id: "1",
          checkRoom: "DR",
          checkProject: "鼻骨",
          checkMoney: "340.22",
          attention: "检查前空腹",
          appointmentTime: "2019-5-29 9:30",
        },
      ],
    };
  },
  created() {
    // 给table赋值，重新遍历新增rowSpan属性，checkRoom，appointmentTime为table里面需要合并的属性名称
    this.table = this.mergeTableRow({
      data: this.table,
      mergeColNames: [
        "checkRoom",
        "checkMoney",
        "attention",
        "appointmentTime",
      ], // 需要合并的列，默认合并列相同的数据
      firstMergeColNames: ["attention"], // 受影响的列，只合并以firstMerge为首的同类型数据
      firstMerge: "checkRoom", // 以哪列为基础进行合并，一般为第一列
    });
    // 例如：如果firstMerge: 'checkRoom'合并了三行，受影响的列也应该是最多合并三行，请看下图1
    // 例如：如果firstMerge: 'checkMoney'合并了两行，受影响的列也应该是最多合并两行，请看下图2
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const span = column["property"] + "-span";
      if (row[span]) {
        return row[span];
      }
    },
    mergeTableRow(config) {
      let data = config.data;
      const { mergeColNames, firstMergeColNames, firstMerge } = config;
      // 没有需要合并的列，直接返回data
      if (!mergeColNames || mergeColNames.length === 0) {
        return data;
      }

      mergeColNames.forEach((m) => {
        //遍历需要合并的列
        const mList = {};
        data = data.map((v, index) => {
          const rowVal = v[m]; //每行对应合并列的值
          if (mList[rowVal] && mList[rowVal].newIndex === index) {
            const flag =
              firstMergeColNames.filter((f) => {
                return f === m;
              }).length !== 0;
            const mcFlag =
              mergeColNames.filter((mc) => {
                return mc === firstMerge;
              }).length === 0;
            if (
              (mcFlag && flag) ||
              (flag &&
                data[index][firstMerge + "-span"] &&
                data[index][firstMerge + "-span"].rowspan === 1)
            ) {
              v[m + "-span"] = {
                rowspan: 1,
                colspan: 1,
              };
            } else {
              data[mList[rowVal]["index"]][m + "-span"].rowspan++;
              v[m + "-span"] = {
                rowspan: 0,
                colspan: 0,
              };
              mList[rowVal]["num"]++;
              mList[rowVal]["newIndex"]++;
            }
          } else {
            mList[rowVal] = { num: 1, index: index, newIndex: index + 1 };
            v[m + "-span"] = {
              rowspan: 1,
              colspan: 1,
            };
          }
          return v;
        });
      });
      return data;
    },
  },
};
</script>

参考别人博客，侵删