二次封装element-plus的表格组件，并实现表格合并

1.组件封装

<template>
  <el-table
    :data="$props.mCollapseTable.tableData"
    :span-method="objectSpanMethod"
    border
  >
    <el-table-column
      v-for="(item, index) in $props.mCollapseTable.tableHeader"
      :key="index"
      :label="item.label"
      :prop="item.param"
      align="center"
    >
      <!-- 数据栏 -->
      <template #default="scope">
        <!-- 给父组件预留插槽，默认展示列表数据 -->
        <slot :itemValue="scope.row" :item="item">
          {{ scope.row[item.param] }}
        </slot>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { watch } from "vue";
const $props = defineProps({
  mCollapseTable: {
    type: Object,
  },
});

// 转存表格数据
let mTableData = $props.mCollapseTable.tableData;

//自定义表格合并函数
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  // if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
    if (columnIndex === 0 || columnIndex === 1) {
    return {
      rowspan: row.rowSpan,
      colspan: 1,
    };
  }
};
const getRowspan = () => {
  for (let i = 0; i < mTableData.length; i++) {
    let isFirst = true;
    for (let j = i + 1; j < mTableData.length; j++) {
     //判断是否属于同一个子对象下面的数组，使同一个子对象中除了第一行之外的其他rowspan为0
      if (isFirst && mTableData[i].isObj === mTableData[j].isObj) {
        isFirst = false;
        mTableData[j].rowSpan = 0;
      } else if (!isFirst && mTableData[i].isObj === mTableData[j].isObj) {
        mTableData[j].rowSpan = 0;
      }
    }
    // 跳过合并过的数据
    i = i + mTableData[i].rowSpan - 1;
  }
};
//监听$props.mCollapseTable的改变，调用合并数组方法，否则可能不会默认去调用
watch(
  $props.mCollapseTable,
  (cur, preCur) => {
    // console.log(cur, preCur);
    mTableData = cur.tableData;
    getRowspan();
  },
  { immediate: true, deep: true }
);
</script>

2.组件引入注册使用

<template>
    <collapseMergeTable :mCollapseTable="ZYCollapseTable" />
</template>

<script setup>
import collapseMergeTable from "@/components/collapseMergeTable.vue";
onMounted(() => {
 const queryData ={
    operator,
    userRouteQuery:{circuitNum,circuitId:id}
  }
 routeQueryAPI(queryData);
})
// ZY信息表格
const ZYCollapseTable = reactive({
  // 表格数据
  tableData: [ ],
  // 表格头
  tableHeader: [
    { label: "标签1", param: "paragraphName" },
    { label: "标签2", param: "circuitNum" },
    { label: "标签3", param: "regionalBureau" },
    { label: "标签4", param: "bureauOffice" },
  ],
});
// routeQueryAPI接口封装
const routeQueryAPI = (queryData) => {
  routeQuery(queryData).then((res) => {
    if (res.code === 200) {
        const tableData = [
          {
            businessStatus: "ZY",
            paragraphName: "2",
            routreInfoList: [
              {
                regionalBureau: "22",
                bureauOffice: "2222",
              },
              {
                regionalBureau: "22",
                bureauOffice: "2222",
              },
              {
                regionalBureau: "22",
                bureauOffice: "2222",
              },
            ],
          },
          {
            businessStatus: "ZT",
            paragraphName: "1",
            routreInfoList: [
              {
                regionalBureau: "11",
                bureauOffice: "111",
              },
              {
                regionalBureau: "11",
                bureauOffice: "111",
              },
              {
                regionalBureau: "11",
                bureauOffice: "111",
              },
            ],
          },
        ].map((obj, index) => {
        return obj.routreInfoList.map((item) => {
          return {
            ...item,
            paragraphName: obj.paragraphName,
            businessStatus: obj.businessStatus,
            //新增rowSpan字段，用于判断需要合并几行或几列，在组件中进行更改
            rowSpan: obj.routreInfoList.length,
            isObj: index,//新增isObj字段，用于判断是否属于同一个子对象下面的数组
          };
        });
      });
      ZYCollapseTable.tableData = tableData
        .flat()
        .filter((item) => item.businessStatus === "ZY");
    }else{
      ElMessage("暂无路由信息");
    }
  });
};
</script>