vue3表格的合并

原创 已于 2025-09-19 14:39:04 修改 · 95 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #elementui #javascript

于 2025-09-18 14:55:20 首次发布
<template>
    <div class="feedback-table-container">
        <el-table :data="processedTableData" border style="width: 100%"
            :header-cell-style="{ background: '#f0f9eb', color: '#606266' }" :span-method="handleSpan">
            <el-table-column prop="company" label="节点" width="150"></el-table-column>
            <el-table-column prop="feedbackStatus" label="反馈情况" width="120">
                <template #default="{ row }">
                    <el-tag v-if="row.feedbackStatus === '已反馈'" type="success">
                        {{ row.feedbackStatus }}
                    </el-tag>
                    <el-tag v-else type="warning">{{ row.feedbackStatus }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="reviewerName" label="办理人"></el-table-column>
            <el-table-column prop="taskName" label="操作"></el-table-column>
            <el-table-column prop="opinion" label="办理意见"></el-table-column>
            <el-table-column prop="dealDate" label="时间"></el-table-column>
        </el-table>
    </div>
</template>
<script setup>
import { computed, ref } from 'vue';

const props = defineProps({
    tableData: {
        type: Array,
        required: true,
        default: () => [],
    },
});

// const feedbackList = ref([
//     {
//         "company": "电能碳资产公司",
//         "feedbackStatus": "待反馈",
//         "dept": "电能碳资产公司",
//         "reviewerName": "李云龙",
//         "taskName": "办理中",
//         "opinion": null,
//         "dealDate": "2025-09-18",
//         "level": "1"
//     },
//     {
//         "company": "电能碳资产公司",
//         "feedbackStatus": "待反馈",
//         "dept": "电能碳资产公司",
//         "reviewerName": "陈萧如",
//         "taskName": "办理中",
//         "opinion": null,
//         "dealDate": "2025-09-18",
//         "level": "1"
//     },
//     {
//         "company": "湖北代表处调整",
//         "feedbackStatus": "待反馈",
//         "dept": "湖北代表处调整",
//         "reviewerName": "张如意",
//         "taskName": "办理中",
//         "opinion": null,
//         "dealDate": "2025-09-18",
//         "level": "1"
//     },
//     {
//         "company": "湖北代表处调整",
//         "feedbackStatus": "待反馈",
//         "dept": "湖北代表处调整",
//         "reviewerName": "李洋",
//         "taskName": "办理中",
//         "opinion": null,
//         "dealDate": "2025-09-18",
//         "level": "1"
//     },
//     {
//         "company": "湖北代表处调整",
//         "feedbackStatus": "待反馈",
//         "dept": "湖北代表处调整",
//         "reviewerName": "白秀欣",
//         "taskName": "办理中",
//         "opinion": null,
//         "dealDate": "2025-09-18",
//         "level": "1"
//     },
//     {
//         "company": "国家电投",
//         "feedbackStatus": "待反馈",
//         "dept": "国家电投",
//         "reviewerName": "白铭",
//         "taskName": "办理中",
//         "opinion": null,
//         "dealDate": "2025-09-18",
//         "level": "1"
//     },
//     {
//         "company": "国家电投",
//         "feedbackStatus": "待反馈",
//         "dept": "国家电投",
//         "reviewerName": "张赛",
//         "taskName": "办理中",
//         "opinion": null,
//         "dealDate": "2025-09-18",
//         "level": "1"
//     },
//     {
//         "company": "国家电投/集团公司总部/直管、授权管理中心",
//         "feedbackStatus": "待反馈",
//         "dept": "国家电投/创新投资",
//         "reviewerName": "姜洪福",
//         "taskName": "办理中",
//         "opinion": null,
//         "dealDate": "2025-09-18",
//         "level": "1"
//     }
// ])


// 预处理数据，计算合并信息（只基于 company 列）
const processedTableData = computed(() => {
    const data = [...props.tableData];
    // const data = [...feedbackList.value];
    const spanMap = {}; // 统一存储合并信息（company 和 feedbackStatus 共用）

    // 1. 计算 company 的合并规则（和原先逻辑一致）
    data.forEach((item, index) => {
        if (!spanMap[item.company]) {
            spanMap[item.company] = {
                nodeRowspan: 1,
                nodeColspan: 1,
                feedbackRowspan: 1, // 新增：让 feedbackStatus 复用 company 的 rowspan
            };
        } else {
            spanMap[item.company].nodeRowspan += 1;
            data[index].__skipNode = true; // 标记需要跳过的行
        }
    });

    // 2. 将 spanMap 信息添加到数据中（feedbackStatus 直接复用 company 的 rowspan）
    return data.map((item) => ({
        ...item,
        ...(spanMap[item.company] || {}),
    }));
});

// 处理行合并的方法（company 和 feedbackStatus 共用同一套 spanMap）
const handleSpan = ({ row, column, rowIndex, columnIndex }) => {
    if (columnIndex === 0 || columnIndex === 1) {
        // 节点列 或 反馈情况列 都复用同一套合并规则
        if (row.__skipNode) {
            return {
                rowspan: 0,
                colspan: 0,
            };
        } else {
            return {
                rowspan: row.nodeRowspan,
                colspan: row.nodeColspan,
            };
        }
    }
};
</script>

<style scoped>
.feedback-table-container {
    padding: 20px;
    background-color: #fff;
}
</style>
<template>
    <div class="feedback-table-container">
        <el-table :data="processedTableData" border style="width: 100%"
            :header-cell-style="{ background: '#f0f9eb', color: '#606266' }" :span-method="handleSpan">
            <el-table-column prop="collectionCompanyName" label="节点" show-overflow-tooltip></el-table-column>
            <el-table-column prop="feedbackStatus" label="反馈情况">
                <template #default="{ row }">
                    <el-tag v-if="row.feedbackStatus === '已反馈'" type="success">
                        {{ row.feedbackStatus }}
                    </el-tag>
                    <el-tag v-else type="warning">{{ row.feedbackStatus }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="办理人" prop="reviewerName">
                <!-- <template #default="{ row }">
                    <div v-for="item in row.reviewerList" :key="item.dept">
                        {{ item.reviewerName }}
                    </div>
                </template> -->
            </el-table-column>
            <el-table-column prop="taskName" label="操作">
                <!-- <template #default="{ row }">
                    <div v-for="item in row.reviewerList" :key="item.dept">
                        {{ item.taskName }}
                    </div>
                </template> -->
            </el-table-column>
            <el-table-column prop="opinion" label="办理意见">
                <!-- <template #default="{ row }">
                    <div v-for="item in row.reviewerList" :key="item.dept">
                        {{ item.opinion }}
                    </div>
                </template> -->
            </el-table-column>
            <el-table-column prop="dealDate" label="时间">
                <!-- <template #default="{ row }">
                    <div v-for="item in row.reviewerList" :key="item.dept">
                        {{ item.dealDate }}
                    </div>
                </template> -->
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup>
import { computed, ref } from 'vue';

const props = defineProps({
    tableData: {
        type: Array,
        required: true,
        default: () => [],
    },
});

const feedbackList = ref([
    {
        "collectionCompanyName": "电能碳资产公司",
        "feedbackStatus": "待反馈",
        "dept": "电能碳资产公司",
        "reviewerName": "李云龙",
        "taskName": "办理中",
        "opinion": null,
        "dealDate": "2025-09-18",
        "level": "1"
    },
    {
        "collectionCompanyName": "电能碳资产公司",
        "feedbackStatus": "待反馈",
        "dept": "电能碳资产公司",
        "reviewerName": "陈萧如",
        "taskName": "办理中",
        "opinion": null,
        "dealDate": "2025-09-18",
        "level": "1"
    },
    {
        "collectionCompanyName": "湖北代表处调整",
        "feedbackStatus": "待反馈",
        "dept": "湖北代表处调整",
        "reviewerName": "张如意",
        "taskName": "办理中",
        "opinion": null,
        "dealDate": "2025-09-18",
        "level": "1"
    },
    {
        "collectionCompanyName": "湖北代表处调整",
        "feedbackStatus": "待反馈",
        "dept": "湖北代表处调整",
        "reviewerName": "李洋",
        "taskName": "办理中",
        "opinion": null,
        "dealDate": "2025-09-18",
        "level": "1"
    },
    {
        "collectionCompanyName": "湖北代表处调整",
        "feedbackStatus": "待反馈",
        "dept": "湖北代表处调整",
        "reviewerName": "白秀欣",
        "taskName": "办理中",
        "opinion": null,
        "dealDate": "2025-09-18",
        "level": "1"
    },
    {
        "collectionCompanyName": "国家电投",
        "feedbackStatus": "待反馈",
        "dept": "国家电投",
        "reviewerName": "白铭",
        "taskName": "办理中",
        "opinion": null,
        "dealDate": "2025-09-18",
        "level": "1"
    },
    {
        "collectionCompanyName": "国家电投",
        "feedbackStatus": "待反馈",
        "dept": "国家电投",
        "reviewerName": "张赛",
        "taskName": "办理中",
        "opinion": null,
        "dealDate": "2025-09-18",
        "level": "1"
    },
    {
        "collectionCompanyName": "国家电投/集团公司总部/直管、授权管理中心",
        "feedbackStatus": "待反馈",
        "dept": "国家电投/创新投资",
        "reviewerName": "姜洪福",
        "taskName": "办理中",
        "opinion": null,
        "dealDate": "2025-09-18",
        "level": "1"
    }
])

const multiSort = (arr) => {
    return arr.sort((a, b) => {
        const nameCompare = a.collectionCompanyName.localeCompare(b.collectionCompanyName);
        if (nameCompare !== 0) return nameCompare;
        return a.collectionDeptName.localeCompare(b.collectionDeptName);
    });
};
let datas = [
    {
        "id": "1968595427840143361",
        "opinionCollectId": "1968595425327755265",
        "collectionCompanyId": "1833789943865933825",
        "collectionCompanyName": "国家电投",
        "reviewerId": "1849382629964525570",
        "reviewerName": "梁超",
        "collectionDeptId": "1939714629174341727",
        "collectionDeptName": "国家电投/上海电力/上电河北/综合部/电投核能本部",
        "delFlag": "0",
        "feedbackStatus": "待反馈",
        "reviewerList": [
            {
                "company": "国家电投",
                "feedbackStatus": "待反馈",
                "dept": "国家电投/上海电力/上电河北/综合部/电投核能本部",
                "reviewerName": "梁超",
                "taskName": "办理中",
                "opinion": null,
                "dealDate": "2025-09-18",
                "level": "1"
            }, {
                "company": "国家电投",
                "feedbackStatus": "待反馈",
                "dept": "国家电投/上海电力/上电河北/综合部/电投核能本部",
                "reviewerName": "梁超111",
                "taskName": "办理中",
                "opinion": null,
                "dealDate": "2025-09-18",
                "level": "1"
            }
        ]
    },
    {
        "id": "1968597018844491778",
        "opinionCollectId": "1968595425327755265",
        "collectionCompanyId": "1833789943865933825",
        "collectionCompanyName": "国家电投",
        "reviewerId": "1849383532671021057",
        "reviewerName": "卫子辰",
        "collectionDeptId": "1849327916250341636",
        "collectionDeptName": "国家电投/电投数科/中电汇智",
        "delFlag": "0",
        "feedbackStatus": "待反馈",
        "reviewerList": [
            {
                "company": "国家电投",
                "feedbackStatus": "待反馈",
                "dept": "国家电投/电投数科/中电汇智",
                "reviewerName": "卫子辰",
                "taskName": "办理中",
                "opinion": null,
                "dealDate": "2025-09-18",
                "level": "1"
            }
        ]
    }
]
// 预处理数据，计算合并信息（只基于 company 列）
const processedTableData = computed(() => {
    const spanMap = {}; // 统一存储合并信息（company 和 feedbackStatus 共用）
    // 1. 计算 company 的合并规则（和原先逻辑一致）
    let arrs = []
    multiSort(datas).forEach(item => {
        item.reviewerList.forEach(v => {
            arrs.push({
                ...v,
                collectionCompanyId: item.collectionCompanyId,
                collectionCompanyName: item.collectionCompanyName,
                collectionDeptId: item.collectionDeptId,
                collectionDeptName: item.collectionDeptName,
                delFlag: item.delFlag,
                id: item.id,
                opinionCollectId: item.opinionCollectId,
                reviewerId: item.reviewerId
            })
        })
    })
    console.log(props.tableData, 8888, arrs);
    const data = [...arrs];
    data.forEach((item, index) => {
        if (!spanMap[item.collectionCompanyName]) {
            spanMap[item.collectionCompanyName] = {
                nodeRowspan: 1,
                nodeColspan: 1,
                feedbackRowspan: 1, // 新增：让 feedbackStatus 复用 collectionCompanyName 的 rowspan
            };
        } else {
            spanMap[item.collectionCompanyName].nodeRowspan += 1;
            data[index].__skipNode = true; // 标记需要跳过的行
        }
    });

    // 2. 将 spanMap 信息添加到数据中（feedbackStatus 直接复用 collectionCompanyName 的 rowspan）
    return data.map((item) => ({
        ...item,
        ...(spanMap[item.collectionCompanyName] || {}),
    }));
});

// 处理行合并的方法（collectionCompanyName 和 feedbackStatus 共用同一套 spanMap）
const handleSpan = ({ row, column, rowIndex, columnIndex }) => {
    if (columnIndex === 0 || columnIndex === 1) {
        // 节点列 或 反馈情况列 都复用同一套合并规则
        if (row.__skipNode) {
            return {
                rowspan: 0,
                colspan: 0,
            };
        } else {
            return {
                rowspan: row.nodeRowspan,
                colspan: row.nodeColspan,
            };
        }
    }
};
</script>

<style scoped>
.feedback-table-container {
    padding: 20px;
    background-color: #fff;
}
</style>

第一种方式使用feedbackList 数据类型

第二种使用datas数据类型进行转换后渲染

注意：数据需做排序，按照collectionCompanyName进行排序，避免渲染混乱

【表格合并行】基于vue3+ant design vue开发表格合并行算法
qq_43612822的博客
05-25 1566
前端实现表格合并相同行
【vue3+tsx实现表格单元格合并】
weixin_40093144的博客
10-14 1238
使用vue3+tsx,实现表格头单元格合并
vue3表格合并+children
web_zch的博客
05-24 976
如果是有多级合并需要嵌套遍历。
vue element表格合并
ss043500的博客
05-26 501
el-table中使用 :span-method="objectSpanMethod"方法。需要将el-table表格第一列相同的内容进行合并。
vue3 el-table合并表格
m0_62956518的博客
06-12 874
3.在获取表格数据的地方调用该方法设置单元格合并的位置及数量。1.el-table标签内设置。
vue3的antd合并表格
hujgg的博客
05-26 789
const data = [ { key: '1', name: 'John Brown', age: 32, tel: '0571-22098909', phone: 18889898989, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', tel: '0571-22098333', phone: 188898988...
Ant Design Vue3 a-table 表格合并行实用指南
weixin_45653441的博客
08-06 451
本文介绍了如何使用Ant Design Vue的a-table组件实现表格行合并功能。通过customCell属性和rowSpan计算逻辑，可以实现基础列合并、复杂跨列合并以及条件合并等场景。关键注意事项包括数据必须预先排序、性能优化、边界处理以及样式兼容问题。文章提供了完整示例代码，并针对合并后边框异常、行高不一致等常见问题给出了解决方案。表格行合并能有效提升数据展示清晰度，但需根据实际业务需求平衡功能实现与性能表现。
vue 可合并表格组件_vue实现表格合并功能
weixin_39907133的博客
12-19 913
本文实例为大家分享了vue实现表格合并功能的具体代码，供大家参考，具体内容如下1、背景本身有vue进行渲染的数据表格，，但是出于整体考虑，需要对相同的列信息进行单元格合并。由于使用的是vue，想到MVVM是要用数据驱动的思想，所以考虑在Model做手脚，而不是渲染出数据来后做DOM操作，当然基本的CSS还是要有的。因此这个方法对所有数据驱动的框架都有效，比如说Angular和React。最后的实现...
教程：使用 Vue 3 和 arco 实现表格合并
王佩健的博客
02-14 620
本教程将介绍如何使用 Vue 3 和 Ant Design Vue 组件库实现表格合并功能。具体来说，我们会根据表格数据中的某个字段（如type）对表格的某一列（如入库类型列）进行合并，同时将质检说明列合并为一列。
Vue实现表格合并
Simon1003的博客
02-14 6166
示例保证有效： 1. 场景 这两天一个项目，属于子需求吧，就是要做一个页面放个简单的banner下面是张大表格用来显示数据项，纯粹为了view层操作方便，就用了vue做渲染。 然而，对方最近又提出了一个恶心需求，需要相邻的相同值的行数据项进行单元格合并，这就醉了。 由于使用的是vue，想到MVVM是要用数据驱动的思想，所以考虑在Model做手脚，而不是渲染出数据来后做DOM操作，当然基本的CSS还...
vue实现表格合并功能
01-18
本文实例为大家分享了vue实现表格合并功能的具体代码，供大家参考，具体内容如下 1、背景 本身有vue进行渲染的数据表格，，但是出于整体考虑，需要对相同的列信息进行单元格合并。 由于使用的是vue，想到MVVM是要用...
Vue实现数据表格合并列rowspan效果
10-16
在本文中，我们将深入探讨如何使用Vue框架来实现数据表格中的列合并，特别是利用`rowspan`属性来达到这一效果。在实际应用中，合并列的需求常见于展示一对多关系的数据，例如显示一个学生的所有课程及其成绩。我们将...
vue element实现表格合并行数据
01-18
本文实例为大家分享了vue element实现表格合并行数据的具体代码，供大家参考，具体内容如下 支持不分页的表格数据，分页的表格数据还有小bug xss=removed span-method=objectSpanMethod> 序号 prop=id ...
前端单元测试入门：使用 Vitest + Vue 测试组件逻辑与交互
degree520的博客
09-20 209
本文介绍了如何使用Vitest框架对Vue3组件进行单元测试。主要内容包括：Vitest的优势（快速运行、兼容Jest、内置覆盖率），环境搭建步骤，从基础计数器组件测试到模拟接口请求等进阶场景。文章详细演示了测试用例编写、断言验证、mock技巧，以及如何生成测试覆盖率报告。通过自动化测试可有效提升代码质量，减少回归问题，适合前端开发者在项目中实践应用。
vue3 ＜el-image 的:src=“event.fileName[0]“ 长度为 “0“ 的元组类型 “[]“ 在索引 “0“ 处没有元素。
Aa12364567的博客
09-19 121
在Vue3中使用el-image组件时，当直接访问event.fileName[0]可能会因空数组而产生类型警告。通过添加v-if判断数组长度虽能避免运行时错误，但TypeScript仍会提示类型问题。解决方案是将直接索引[0]改为使用响应式变量imgIndex（初始值为0），即event.fileName?.[imgIndex]，这样既保持功能不变，又消除了类型警告。这种写法更符合TypeScript的类型安全要求，同时保留了原有的空值处理逻辑（使用默认图片）。
2.15Vue全家桶-VueRouter
最新发布
chenjiajiak的博客
09-20 499
Vue全家桶：Vue Core Vue的核心语法VueRoutherVuex/pinia。
有些软件要求基础环境包含oneAPI组件时带有小版本怎么解释
luohaitao的专栏
09-17 446
软件安装时出现Intel oneAPI 2024.2.1和Version 2021.13.1两个版本号，是因为它们代表不同含义。2024.2.1是oneAPI工具包整体版本号，采用语义化版本格式（主版本.次版本.补丁号）；而2021.13.1是特定组件（如IntelMPILibrary）的版本号，其中2021代表基础年份，13表示第13次更新。由于工具包和组件采用不同的版本号体系，因此会出现版本号不一致的情况。
python+vue食谱交流平台（源码+文档+调试+基础修改+答疑）
weixin_41915110的博客
09-18 1183
本文介绍了一个完整的软件开发项目技术文档，包含源码、文档、PPT等学习资源。项目采用Java+SpringBoot+Vue的技术栈，实现了用户注册校验、商品智能推荐等功能，配套MySQL数据库。文档详细展示了项目目录结构、运行截图、核心代码片段（如注册校验逻辑和推荐算法）、数据库设计以及完整的技术方案说明（包括前后端技术选型和开发环境配置）。最后还推荐了多个基于Python/Django的同类可视化项目供参考交流。
Vue 项目中使用 AbortController：解决请求取消、超时与内存泄漏问题
FengChen的进阶之路
09-18 438
在项目中，搜索输入时中止旧请求→ 保证数据正确。统一中止多个请求→ 页面切换时清理资源。组件卸载时中止请求→ 避免内存泄漏与报错。超时自动取消→ 提升用户体验。工具类封装→ 增强代码复用性和可维护性。就是请求的“刹车器”，能在项目中随时中止请求，保证性能与体验。
vue3 表格列合并
09-10
Vue3中的表格列合并通常通过`vue-good-table`这样的第三方库来实现，它提供了一种方便的方式来创建动态化的表格，并支持列合并功能。以下是基本步骤： 1. 安装依赖：首先需要安装`vue-good-table`和可能的其他依赖，例如`vuex`用于状态管理。 ```bash npm install vue-good-table vuex ``` 2. 创建表格组件：在组件内配置列定义，包括合并单元格的情况。例如： ```javascript import { useTable, useSortBy } from &#39;vue-good-table&#39;; export default { setup() { const columns = [ // ... { title: &#39;姓名&#39;, field: &#39;name&#39;, mergeHeader: true }, // 合并单元格的列 // ... ]; const data = ...; // 数据源 return { tableData: data, tableColumns: columns, sorters: useSortBy(data), // 可选的排序功能 }; }, } ``` 3. 配置合并规则：你可以根据实际需求指定哪些行或列应该合并。这通常需要在数据处理阶段完成。 4. 渲染表格：`vue-good-table`会自动渲染并处理合并的单元格，显示合并后的结果。 ```html <template> <div> <GoodTable :data="tableData" :columns="tableColumns" :sorters="sorters" /> </div> </template> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值