Vue使用Antd中a-table实现表格数据列合并展示示例代码

const dataSource = ref([
  {
    id: 1,
    pl: "冰箱",
    zznd: "P1",
    sm: "说明说明说明1",
    dw: "台",
    gs: "1",
    dj: "100"
  },
  {
    id: 1,
    pl: "冰箱",
    zznd: "P2",
    sm: "说明说明说明2",
    dw: "台",
    gs: "1",
    dj: "100"
  },
  {
    id: 1,
    pl: "冰箱",
    zznd: "P2",
    sm: "说明说明说明3",
    dw: "台",
    gs: "1",
    dj: "100"
  },
  {
    id: 1,
    pl: "冰箱",
    zznd: "P3",
    sm: "说明说明说明4",
    dw: "台",
    gs: "1",
    dj: "100"
  },
  {
    id: 1,
    pl: "冰箱",
    zznd: "P3",
    sm: "说明说明说明4",
    dw: "台",
    gs: "1",
    dj: "100"
  }
])

const calculateRowSpan = (data, index, key) => {
  if (index === 0 || data[index][key] !== data[index - 1][key]) {
    let rowSpan = 1
    for (let i = index + 1; i < data.length; i++) {
      if (data[i][key] === data[index][key]) {
        rowSpan++
      } else {
        break
      }
    }
    return rowSpan
  }
  return 0
}

<template>
  <a-modal
    title=" "
    :footer="null"
    width="1160px"
    wrap-class-name="price-modal-wrap"
    :open="open"
    @update:open="submit"
    centered
    destroy-on-close>
    <!-- @update:open="(v: boolean) => emit('update:open', v)" -->
    <div class="px-[54px] pb-[30px] pt-3">
      <div class="flex flex-col items-center">
        <img src="@/assets/images/stepTemp/success.svg" alt="" />
        <span class="text-[#000] text-[24px] font-medium mb-[12px]">提交成功</span>
      </div>
      <a-table bordered :loading="loading" :columns="columns" :data-source="dataSource" :pagination="false">
        <template #bodyCell="{ text, column, record, index }">
          <template v-if="!['demandId', 'createTime', 'operator'].includes(String(column.dataIndex))">
            <a-tooltip placement="topLeft" :title="text">
              {{ text }}
            </a-tooltip>
          </template>
        </template>
      </a-table>
      <div class="text-right pt-5">
        <a-button type="primary" class="w-[120px]" @click="submit">确定</a-button>
      </div>
    </div>
  </a-modal>
</template>
<script setup lang="ts">
const props = defineProps<{
  open: boolean
  flag?: string
}>()
const emit = defineEmits(["update:open", "goBack"])
const submit = () => {
  if (props.flag === "table") {
    emit("update:open", false)
    return
  }
  emit("goBack")
}
const dataSource = ref([
  {
    id: 1,
    pl: "冰箱",
    zznd: "P1",
    sm: "说明说明说明1",
    dw: "台",
    gs: "1",
    dj: "100"
  },
  {
    id: 1,
    pl: "冰箱",
    zznd: "P2",
    sm: "说明说明说明2",
    dw: "台",
    gs: "1",
    dj: "100"
  },
  {
    id: 1,
    pl: "冰箱",
    zznd: "P2",
    sm: "说明说明说明3",
    dw: "台",
    gs: "1",
    dj: "100"
  },
  {
    id: 1,
    pl: "冰箱",
    zznd: "P3",
    sm: "说明说明说明4",
    dw: "台",
    gs: "1",
    dj: "100"
  },
  {
    id: 1,
    pl: "冰箱",
    zznd: "P3",
    sm: "说明说明说明4",
    dw: "台",
    gs: "1",
    dj: "100"
  }
])
const loading = ref(false)
const calculateRowSpan = (data, index, key) => {
  if (index === 0 || data[index][key] !== data[index - 1][key]) {
    let rowSpan = 1
    for (let i = index + 1; i < data.length; i++) {
      if (data[i][key] === data[index][key]) {
        rowSpan++
      } else {
        break
      }
    }
    return rowSpan
  }
  return 0
}
const columns = [
  {
    title: "品类",
    dataIndex: "pl",
    width: 180,
    customCell: (_, index) => {
      const rowSpan = calculateRowSpan(dataSource.value, index, "pl")
      return {
        rowSpan
      }
    }
  },
  {
    title: "制作难度",
    dataIndex: "zznd",
    ellipsis: true,
    width: 180,
    customCell: (_, index) => {
      const rowSpan = calculateRowSpan(dataSource.value, index, "zznd")
      return {
        rowSpan
      }
    }
  },
  {
    title: "说明",
    dataIndex: "sm",
    width: 180
  },
  {
    title: "单位（台/件）",
    dataIndex: "dw",
    width: 180
  },
  {
    title: "工时（小时）",
    dataIndex: "gs",
    width: 180
  },
  {
    title: "单价（元）",
    dataIndex: "dj",
    width: 180
  }
  // {
  //   title: "操作",
  //   dataIndex: "operator",
  //   width: 140
  // }
]
</script>
<style lang="scss">
.price-modal-wrap {
  .ant-modal-content {
    @apply rounded-[20px] overflow-hidden;
  }
  .ant-modal-header {
    @apply rounded-[20px_20px_0_0] py-10 px-[30px] border-none;
  }
  .ant-modal-title {
    @apply text-[20px] font-medium leading-[22px];
  }
  .ant-modal-body {
    padding: 0;
  }
  .ant-modal-close {
    @apply right-[30px] top-[42px];
  }
}
</style>