vue3使用antd组件库a-table表格组件实现合并单元格。

需求

发货单编码、实际发货数量、发货日期、操作人员完全相同的情况下合并单元格展示；

<template>
  <a-table :columns="columns" :data-source="dataSource" :custom-row="customRow" />
</template>

<script>
import { ref } from 'vue'
import { Table } from 'ant-design-vue'

export default {
  components: {
    'a-table': Table
  },
  setup() {
    const columns = ref([
      // 表头配置
      {
        title: '发货单编码',
        dataIndex: 'deliveryCode',
        key: 'deliveryCode',
        customCell: ({ rowSpan }) => {
          return {
            rowSpan: rowSpan
          }
        }
      },
      {
        title: '实际发货数量',
        dataIndex: 'quantity',
        key: 'quantity',
        customCell: ({ rowSpan }) => {
          return {
            rowSpan: rowSpan
          }
        }
      },
      {
        title: '发货日期',
        dataIndex: 'deliveryDate',
        key: 'deliveryDate',
        customCell: ({ rowSpan }) => {
          return {
            rowSpan: rowSpan
          }
        }
      },
      {
        title: '操作人员',
        dataIndex: 'operator',
        key: 'operator',
        customCell: ({ rowSpan }) => {
          return {
            rowSpan: rowSpan
          }
        }
      },
      {
        title: '产品名称',
        dataIndex: 'productName',
        key: 'productName'
      },
      {
        title: '产品类型',
        dataIndex: 'productType',
        key: 'productType'
      },
      {
        title: '生产令牌',
        dataIndex: 'productionToken',
        key: 'productionToken'
      }
    ])

    const dataSource = ref([
      // 表格数据
      // 数据需要按照发货单编码排序
      {
        deliveryCode: 'A001',
        quantity: '10',
        deliveryDate: '2023-06-01',
        operator: 'John',
        productName: 'Product A',
        productType: 'Type 1',
        productionToken: 'Token 1'
      },
      {
        deliveryCode: 'A001',
        quantity: '10',
        deliveryDate: '2023-06-01',
        operator: 'John',
        productName: 'Product B',
        productType: 'Type 2',
        productionToken: 'Token 2'
      },
      {
        deliveryCode: 'A002',
        quantity: '15',
        deliveryDate: '2023-06-02',
        operator: 'Jane',
        productName: 'Product C',
        productType: 'Type 1',
        productionToken: 'Token 3'
      },
      {
        deliveryCode: 'A002',
        quantity: '25',
        deliveryDate: '2023-06-02',
        operator: 'Jane',
        productName: 'Product D',
        productType: 'Type 2',
        productionToken: 'Token 4'
      }
    ])
    function groupData(data) {
      let currentDeliveryCode = '';
      let currentQuantity = '';
      let currentDeliveryDate = '';
      let currentOperator = '';
      return data.map((item, index) => {
        if (
          currentDeliveryCode !== item.deliveryCode ||
          currentQuantity !== item.quantity ||
          currentDeliveryDate !== item.deliveryDate ||
          currentOperator !== item.operator
        ) {
          currentDeliveryCode = item.deliveryCode;
          currentQuantity = item.quantity;
          currentDeliveryDate = item.deliveryDate;
          currentOperator = item.operator;
          let rowSpan = 0;
          for (let i = 0; i < data.length; i++) {
            if (i >= index) {
              const currentItem = data[i];
              if (
                currentDeliveryCode === currentItem.deliveryCode &&
                currentQuantity === currentItem.quantity &&
                currentDeliveryDate === currentItem.deliveryDate &&
                currentOperator === currentItem.operator
              ) {
                rowSpan += 1;
              } else {
                break;
              }
            }
          }
          item.rowSpan = rowSpan;
        } else {
          item.rowSpan = 0;
        }

        return item;
      });
    }
    groupData(dataSource.value)
    return {
      columns,
      dataSource,
      groupData,
    }
  }
}
</script>

效果

这种需求一般不会出现，一般是根据一个字段进行合并，那就更简单了如下：

    function groupData(data) {
    //声明一个新字段
      let currentMilepostName = ''
      return data.map((item, index) => {
        if (currentMilepostName !== item.milepostName) {
          currentMilepostName = item.milepostName
          let rowSpan = 0
          for (let i = 0; i < data.length; i++) {
            if (i >= index) {
              if (currentMilepostName === data[i].milepostName) {
                rowSpan += 1
              } else {
                break
              }
            }
          }
          item.rowSpan = rowSpan
        } else {
          item.rowSpan = 0
        }

        return item
      })
    }

columns: [
        {
          title: '父级姓名',
          dataIndex: 'Name',
          ellipsis: true,
          width: '250px',
          fixed: 'left',
          align: 'left',
          customCell: ({ rowSpan }) => {
            return {
              rowSpan: rowSpan
            }
          }
        },  
        ]