vue2+antd实现表格合并;excel效果

效果图

在这里插入图片描述

一、html

<template><div><a-table :columns="columns" :dataSource="dataSource" rowKey="id" :pagination="false" bordered><template slot="content1" slot-scope="text">{{text}}</template> </a-table></div>
</template>

二、js

export default {data () {return {sortLevel: ['date'],columns: [{title: '日期',align: 'center',dataIndex: 'date',key: 'date',customRender: this.dateRender,},{title: '内容',colSpan: 2,dataIndex: 'content',scopedSlots: { customRender: 'content1' },},{title: '内容',colSpan: 0,dataIndex: 'content2',// customRender: renderContent,},],datas: [{id: 1,content: '123',content2: 'qqw',date: '周一'},{id: 2,content: '123',content2: 'qwqw',date: '周二'},{id: 3,content: '123',content2: 'wewe',date: '周一'},,{id: 42,content: '12332',content2: 'sad',date: '周三'},,{id: 52,content: '1223',content2: 'asdasd',date: '周一'}],dataSource: []}},mounted () {this.dataSource = this.convertData(this.datas)console.log('   this.dataSource : ', this.dataSource);},methods: {dateRender (value, row, index) {return {children: value,attrs: {rowSpan: row.dateRowSpan},};},// 获取需要合并数据的rowSpanconvertData (arr, levelIndex = 0) {const levelKey = this.sortLevelconst key = levelKey[levelIndex]// 根据不同维度重新整合数据let groupObj = this.groupBy(arr, key) || {};Object.keys(groupObj).forEach(groupKey => {if (levelIndex < levelKey.length - 1) {groupObj[groupKey] = this.convertData(groupObj[groupKey], levelIndex + 1)}// 计算rowSpangroupObj[groupKey].forEach((item, index, arr) => {item[`${key}RowSpan`] = index === 0 ? arr.length : 0})})return Object.values(groupObj).flat()},// 根据属性分组groupBy (arr = [], key) {let obj = {}arr.forEach(item => {const val = item[key]if (!obj[val]) {obj[val] = []}obj[val].push(item)})return obj},},
}

三、完整代码

<template><div><a-table :columns="columns" :dataSource="dataSource" rowKey="id" :pagination="false" bordered></a-table></div>
</template><script>export default {data () {const renderContent = (value, row, index) => {const obj = {children: value,attrs: {},};if (index === 3) {obj.attrs.colSpan = 0;}return obj;};return {sortLevel: ['date'],columns: [{title: '日期',align: 'center',dataIndex: 'date',key: 'date',customRender: this.dateRender,},{title: '内容',colSpan: 2,dataIndex: 'content',},{title: '内容',colSpan: 0,dataIndex: 'content2',// customRender: renderContent,},],datas: [{id: 1,content: '123',content2: 'qqw',date: '周一'},{id: 2,content: '123',content2: 'qwqw',date: '周二'},{id: 3,content: '123',content2: 'wewe',date: '周一'},,{id: 42,content: '12332',content2: 'sad',date: '周三'},,{id: 52,content: '1223',content2: 'asdasd',date: '周一'}],dataSource: []}},mounted () {this.dataSource = this.convertData(this.datas)console.log('   this.dataSource : ', this.dataSource);},methods: {dateRender (value, row, index) {return {children: value,attrs: {rowSpan: row.dateRowSpan},};},// 获取需要合并数据的rowSpanconvertData (arr, levelIndex = 0) {const levelKey = this.sortLevelconst key = levelKey[levelIndex]// 根据不同维度重新整合数据let groupObj = this.groupBy(arr, key) || {};Object.keys(groupObj).forEach(groupKey => {if (levelIndex < levelKey.length - 1) {groupObj[groupKey] = this.convertData(groupObj[groupKey], levelIndex + 1)}// 计算rowSpangroupObj[groupKey].forEach((item, index, arr) => {item[`${key}RowSpan`] = index === 0 ? arr.length : 0})})return Object.values(groupObj).flat()},// 根据属性分组groupBy (arr = [], key) {let obj = {}arr.forEach(item => {const val = item[key]if (!obj[val]) {obj[val] = []}obj[val].push(item)})return obj},},
}
</script>
<style lang="less" scoped></style>```

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/47004.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JuiceFS缓存特性

缓存 对于一个由对象存储和数据库组合驱动的文件系统&#xff0c;缓存是本地客户端与远端服务之间高效交互的重要纽带。读写的数据可以提前或者异步载入缓存&#xff0c;再由客户端在后台与远端服务交互执行异步上传或预取数据。相比直接与远端服务交互&#xff0c;采用缓存技…

萝卜快跑无人车实行规模运营的态度、反思与展望

社会各界对萝卜快跑无人车实行规模运营的态度、反思与展望可以从以下几个方面来解读&#xff1a; 态度 支持与期待&#xff1a; 技术发展与进步&#xff1a;媒体和公众普遍关注到无人驾驶技术的快速发展及其在交通运输领域的应用&#xff0c;认为这是技术进步的重要体现。出行…

图片如何去水印,PS 图片去水印的几种常见方法

在数字图像的世界里&#xff0c;水印常常被用来标识版权或防止未经授权的使用&#xff0c;但有时它们却成为了美观的障碍。无论是出于个人偏好还是专业需求&#xff0c;去除图片上的水印已经成为一项常见的任务。 Adobe Photoshop 作为行业标准的图像编辑软件&#xff0c;提供…

Web前端-Web开发HTML基础8-nav

一. 基础 1. 写一个导航标签&#xff0c;里面是两个超链接&#xff0c;分别指向https://baidu.com和https://huawei.com/cn&#xff1b; 2. 写一个导航标签&#xff0c;里面是三个超链接&#xff0c;分别指向https://baidu.com、https://huawei.com/cn和https://www.nowcoder.c…

热门软件缺陷管理工具2024:专业评测与建议

国内外主流的10款软件缺陷管理工具软件对比&#xff1a;PingCode、Worktile、禅道、Tapd、Teambition、Tower、JIRA、Bugzilla、MantisBT、Trac。 在软件开发过程中&#xff0c;管理缺陷和漏洞常常成为一项挑战&#xff0c;尤其是在项目规模庞大时。选择一个高效的软件缺陷管理…

C语言------指针讲解(2)

目录 一、数组名的理解 二、使用指针访问数组 三、一维数组传参的本质 四、冒泡排序 五、二级指针 六、指针数组 七、指针数组模拟二维数组 一、数组名的理解 通过学习&#xff0c;我们知道&#xff1a;数组名和数组首元素的地址打印出来的结果一模一样&#xff0c;数组…

spi 推跑马灯

spi 推跑马灯&#xff0c;来电时跑马灯效果 归零码 1 主控spi单次最少是发一个U8 也就是8个bit位&#xff0c;所以软件充分利用 这个u8的每一个bit位组合成一个 灯需要的0码 或者1码 2 遇到的问题&#xff0c;主频改变的时候数据就不对了&#xff0c;发送spi数据前需要判断当…

深度刨析程序中的指针

前面我们已经学习过了指针的一下性质&#xff1a; 指针就是个变量&#xff0c;用来存放地址&#xff0c;地址唯一标识的一块内存空间指针的大小是固定的4/8个字节&#xff08;32位平台/64位平台&#xff09;指针是有类型&#xff0c;指针的类型决定了指针的加减整数的步长&…

SQL 中的 EXISTS 子句:探究其用途与应用

目录 EXISTS 子句简介语法 EXISTS 与 NOT EXISTSEXISTS 子句的工作原理实际应用场景场景一&#xff1a;筛选存在关联数据的记录场景二&#xff1a;优化查询性能 EXISTS 与其他 SQL 结构的比较EXISTS vs. JOINEXISTS vs. IN 多重 EXISTS 条件在 UPDATE 语句中使用 EXISTS常见问题…

Flutter基本概念常用命名

Flutter基本概念 一切皆是Widgets多组件容器&#xff08;Row、Column、Stack、Wrap&#xff09;单组件容器&#xff08;Container、Padding、Center、Align&#xff09;Flutter组件的规律 Widgets状态 stateful&#xff08;有状态&#xff09; 当创建一个能随时间动态改变的w…

uniapp动态自定义导航栏,动态修改后无法再次点击的解决方案

如果你的写法是这样&#xff1a; 这种方式在动态修改后 &#xff0c;再次点击按钮&#xff0c;按钮事件无法正常回调 // #ifdef APP-PLUSvar pages getCurrentPages();var page pages[pages.length - 1];var currentWebview page.$getAppWebview();var tn currentWebview…

Maven学习—如何在IDEA中配置Maven?又如何创建Maven工程?(详细攻略)

目录 前言 1.在IDEA中配置Maven 2.创建Maven项目 &#xff08;1&#xff09;Maven&#xff1a;创建普通Maven工程 &#xff08;2&#xff09;Maven Archetype&#xff1a;创建Maven模板工程 前言 本篇博客将详细的介绍在IDEA中如何配置Maven&#xff0c;以及如何创建一个Ma…

分布式 I/O 系统 BL200 Modbus TCP 耦合器

BL200 耦合器是一个数据采集和控制系统&#xff0c;基于强大的 32 位微处理器设计&#xff0c;采用 Linux 操作系统&#xff0c;支持 Modbus 协议&#xff0c;可以快速接入现场 PLC、SCADA 以及 ERP 系统&#xff0c; 内置逻辑控制、边缘计算应用&#xff0c;适用于 IIoT 和工业…

Android中的图像效果实现:探索图像处理的艺术

在Android开发领域&#xff0c;图像处理技术是提升应用吸引力和用户体验的关键组成部分。从简单的颜色调整到复杂的滤镜效果&#xff0c;开发者可以通过各种方法在Android应用中创造令人印象深刻的视觉效果。本文将从多个角度探讨Android中图像效果的实现&#xff0c;包括基础图…

园区道路车辆智能管控视频解决方案,打造安全畅通的园区交通环境

一、背景需求分析 随着企业园区的快速发展和扩张&#xff0c;道路车辆管理成为了保障园区秩序、提升运营效率及确保员工安全的重要任务。针对这一需求&#xff0c;旭帆科技TSINGSEE青犀提出了一种企业园区道路车辆管控的解决方案&#xff0c;通过整合视频监控、智能识别等技术…

opencv—常用函数学习_“干货“_9

目录 二五、霍夫变换 检测图像中的直线 (HoughLines) 检测图像中的直线段 (HoughLinesP) 检测图像中的圆 (HoughCircles) 解释 二六、傅里叶变化 获取最优的DFT大小 (getOptimalDFTSize) 执行离散傅里叶变换 (dft) 和 逆变换 (idft) 解释 实际应用 图像滤波示例 http…

Qt6 OpenCV4视频监控系统项目源码解析——附源码及编译运行步骤

很多刚毕业&#xff0c;或者想着转行到C Qt方向的小伙伴&#xff0c;平时可能拿不出比较像样的项目。这里你可要好好收藏啦。自己拿回去好好改改&#xff0c;就可以成为自己的项目经历了。祝各位找工作顺利呀。 好了。废话不多说。 这个项目架构采用的是MVC架构&#xff0c;结…

比较RMI、HTTP+JSON/XML、gRPC

RMI&#xff08;Remote Method Invocation&#xff0c;远程方法调用&#xff09;、HTTPJSON/XML、gRPC是三种不同的技术或协议&#xff0c;它们各自在远程通信、数据传输和服务交互方面有不同的特点和应用场景。以下是对这三种技术的详细比较&#xff1a; 1. RMI&#xff08;R…

Porfinet从转DeviceNet从总线协议转换网关

产品功能 1. 远创智控YC-DNT-PN型是Porfinet从转Devicenet从工业级Porfinet 网关。‌这种网关设备允许将Porfinet网络中的设备连接到Devicenet网络中&#xff0c;‌从而实现不同工业通信协议之间的互操作性。‌这些网关设备通常具有两个以太网接口&#xff0c;‌分别用于连接Po…

STM32智能楼宇照明系统教程

目录 引言环境准备智能楼宇照明系统基础代码实现&#xff1a;实现智能楼宇照明系统 4.1 数据采集模块 4.2 数据处理与控制模块 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景&#xff1a;楼宇照明管理与优化问题解决方案与优化收尾与总结 1. 引言 智能楼宇照明系…