el-table合并列实例

想要实现效果：

目前接口返回数据

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>