Vue使用Antd中a-table實現(xiàn)表格數(shù)據(jù)列合并展示示例代碼

更新時間：2024年11月09日 12:11:53 作者：JackieDYH

文章介紹了如何在Vue中使用Ant?Design的a-table組件實現(xiàn)表格數(shù)據(jù)列合并展示,通過處理函數(shù)對源碼數(shù)據(jù)進行操作,處理相同數(shù)據(jù)時合并列單元格

原數(shù)據(jù)

根據(jù)需求實現(xiàn)當前兩列數(shù)據(jù)中有相同數(shù)據(jù)時，合并列單元格

實現(xiàn)

源碼

數(shù)據(jù)

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"
  }
])

處理函數(shù)

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>

到此這篇關于Vue中使用Antd中a-table實現(xiàn)表格數(shù)據(jù)列合并展示的文章就介紹到這了,更多相關vue Antd內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: