antdesign vue 表格动态合并（动态数据，纯前端）

最新推荐文章于 2025-06-04 11:22:55 发布

原创

最新推荐文章于 2025-06-04 11:22:55 发布 · 2.4k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue

本文介绍如何在AntDesign Vue的表格组件中实现动态数据的单元格合并，全程在前端完成，无需后端配合。通过示例代码解析实现方法，帮助开发者掌握在Vue项目中动态合并表格的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

antdesign vue ----table

<template>
  <a-table :columns="columns" :data-source="data" bordered</a-table>
</template>
<script>
//  data为数据
const data = [
{
   
   
    projectName: "项目3",
    projectDetail: "业务招待费",
    individualAccount: 1,
    corporateAccount: 50,
    expend: 10,
    totalSales: 60
  },
  {
   
   
    projectName: "项目3",
    projectDetail: "水电费",
    individualAccount: 2,
    corporateAccount: 50,
    expend: 12,
    totalSales: 60
  },
  {
   
   
    projectName: "项目2",
    projectDetail: "业务招待费",
    individualAccount: 3,
    corporateAccount: 50,
    expend: 12,
    totalSales: 60
  },
  {
   
   
    projectName: "项目3",
    projectDetail: "业务招待费",
    individualAccount: 4,
    corporateAccount: 50,
    expend: 11,
    totalSales: 20
  },
  {
   
   
    projectName: "项目5",
    projectDetail: "业务招待费",
    individualAccount: 4