想要實現效果：

目前接口返回數據

data:[{companyCode: "NXKYS",companyName:'1123',costContractId:'1123',costContractName:'1123',createBy:'1123',details:[{brand:'1123',contractItemName:'1123',modelSpec:'1123',projectItemId:'1123',requestQty:'1123',transactionZone:'1123'},{brand:'1123',contractItemName:'1123',modelSpec:'1123',projectItemId:'1123',requestQty:'1123',transactionZone:'1123'},]},{companyCode: "NXKYS",companyName:'1123',costContractId:'1123',costContractName:'1123',createBy:'1123',details:[{brand:'1123',contractItemName:'1123',modelSpec:'1123',projectItemId:'1123',requestQty:'1123',transactionZone:'1123'},{brand:'1123',contractItemName:'1123',modelSpec:'1123',projectItemId:'1123',requestQty:'1123',transactionZone:'1123'},]}]；

其中要根據details這個字段去進行展示圖中標記的列。并將其他列進行合并。

首先要重新修改數據格式，方便進行合并以及列表渲染的展示。

接口返回的數據在tableData.value中

計算需要處理子表的數據

const flattenedData = computed(() => {const result = [];const data = tableData.value;if (!data || !Array.isArray(data)) {return result;}data.forEach((mainItem, mainIndex) => {if (mainItem?.details && Array.isArray(mainItem.details) && mainItem.details.length > 0) {mainItem.details.forEach((detail, detailIndex) => {result.push({...mainItem,...detail,_mainIndex: mainIndex,_detailIndex: detailIndex});});} else {result.push({...mainItem,_mainIndex: mainIndex, _detailIndex: 0 // 這是 details 為空時的唯一一行});}});return result;});

el-table中添加span-method方法

<el-table

? ? ? ? ? ref="tableRef"

? ? ? ? ? v-loading="tableLoading"

? ? ? ? ? :data="flattenedData"

? ? ? ? ? :height="tableHeight"

? ? ? ? ? :header-cell-style="{ backgroundColor: '#F6F8FC' }"

? ? ? ? ? highlight-current-row

? ? ? ? ? :border="props.border"

? ? ? ? ? v-bind="$attrs"

? ? ? ? ? @current-change="handleSelectionChange"

? ? ? ? ? @header-dragend="headerDragend"

? ? ? ? ? :scrollbar-always-on="true"

? ? ? ? ? :span-method="objectSpanMethod"

? ? ? ? >

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {const mergeColumns = ['documentCode','costContractId','costContractName','supplierName','handlerDepartmentDesc','projectId','projectName','whName','whCategoryDesc','workflowStateDesc','xz','xh','cz',];const prop = column.property;if (!row) {console.warn('Row is undefined in objectSpanMethod');return { rowspan: 1, colspan: 1 };}if (row._mainIndex === undefined || row._mainIndex === null) {console.warn(`_mainIndex is ${row._mainIndex} for row at index ${rowIndex}`);return { rowspan: 1, colspan: 1 };}if (mergeColumns.includes(prop)) {const mainItemIndex = row._mainIndex;if (!tableData.value || mainItemIndex < 0 ||mainItemIndex >= tableData.value.length ) {console.error('Invalid mainItemIndex or tableData');return { rowspan: 1, colspan: 1 };}const mainItem = tableData.value[mainItemIndex]; if (!mainItem) {console.error(`mainItem is missing for index ${mainItemIndex}`);return { rowspan: 1, colspan: 1 };}const details = mainItem.details || [];const detailCount = details.length;const effectiveRowspan = detailCount > 0 ? detailCount : 1;if (row._detailIndex === 0) {return {rowspan: effectiveRowspan,colspan: 1,};} else {return {rowspan: 0,colspan: 0,};}}return {rowspan: 1,colspan: 1,};
};

mergeColumns定義的是需要進行合并的列的props；

列表渲染就正常展示就可以

如：

?<el-table-column

? ? ? ? prop="transactionZone"

? ? ? ? label="入庫分區"

? ? ? ? :show-overflow-tooltip="true"

? ? ? ? width="150"

? ? ? >

? ? ? </el-table-column>