效果图：
如何实现：
<template><div><el-table:data="tableData"border:span-method="objectSpanMethod"style="width: 100%; margin-top: 20px"><el-table-column type="index" :index="getIndex" label="序号" width="80" /><el-table-column prop="resourceTypeName" label="需求类型" width="180" /><el-table-column prop="resourceName" label="属地需求" /><el-table-column prop="resourceNum" label="需求数量" /><el-table-column prop="dispatchNum" label="AI辅助建议" /></el-table></div>
</template>
<script setup>
import {onBeforeUnmount,onMounted,getCurrentInstance,ref,watch,nextTick,
} from "vue";const currentIndex = ref(1);
const tableData = ref([{resourceType: "1",resourceTypeName: "专家",resourceCode: "resource_gw_hfssjdccz",resourceName: "XXXX内容2",resourceNum: "1",dispatchNum: "0",},{resourceType: "1",resourceTypeName: "专家",resourceCode: "resource_gw_swzdsjdccz",resourceName: "XXXX内容1",resourceNum: "1",dispatchNum: "0",},{resourceType: "1",resourceTypeName: "专家",resourceCode: "resource_gw_tfjxcrbdccz",resourceName: "XXXX内容3",resourceNum: "2",dispatchNum: "8",},{resourceType: "3",resourceTypeName: "物资",resourceCode: "supp_material_type_1_1_1_1",resourceName: "XXXX内容4",resourceNum: "1",dispatchNum: "297191",},{resourceType: "3",resourceTypeName: "物资",resourceCode: "supp_material_type_1_1_1_1",resourceName: "XXXX内容9",resourceNum: "1",dispatchNum: "297191",},
]);const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {if (columnIndex === 1) {// 如果当前值和上一行的值相同，则将当前单元格隐藏if (row.resourceType === tableData.value[rowIndex - 1]?.resourceType) {return { rowspan: 0, colspan: 0 };} else {// 否则计算当前单元格应该跨越多少行let rowspan = 1;for (let i = rowIndex + 1; i < tableData.value.length; i++) {if (tableData.value[i].resourceType === row.resourceType) {rowspan++;} else {break;}}return { rowspan, colspan: 1 };}}
};const getIndex = (index) => {const resourceType = tableData.value[index].resourceType;let counter = 0;for (let i = 0; i < index; i++) {if (tableData.value[i].resourceType === resourceType) {counter++;}}return currentIndex.value + counter;
};
</script>
