Ant-design-vue Table 列表 columns 将作为导出功能入参

将 Table 列表 columns 将作为导出功能入参,由于 columns 数据跟入参存在差异,因此我们抽离公共方法进行处理。

const handleExportColumnsData = function (columns = []) {if (!columns.length) return []return columns.filter(item => item.dataIndex !== 'action').map(item => {const res = { displayName: item.title, field: item.dataIndex }item.enum && (res.enumMap = getEnumMap(item.enum))return res})
}

首先过滤掉操作列 action,然后如果该列存在使用过枚举值的,则调用 getEnumMap 方法进行转换。代码实现如下:

const getEnumMap = function (type, key = 'dictCode', value = 'dictValue') {const item = typeof type === 'string' ? store.state.keyvalue.sysKeys[type] : typereturn item.reduce((obj, item) => {obj[item[key]] = item[value]return obj}, {})
}

getEnumMap 的第一个入参 type 支持字符串映射 store 中的属性,也可以直接传入枚举值数组,然后使用 reduce 将数组转换为对象,这里 key 和 value 是枚举值数组中的 key、value 字段名。

考虑到 columns 列表可能存在嵌套表头,因此我们需要使用递归来处理每个嵌套层级的数据,具体代码逻辑如下:

const handleExportColumnsData = function (columns = []) {const processColumn = (column) => {const res = { displayName: column.title, field: column.dataIndex };if (column.enum) {res.enumMap = getEnumMap(column.enum);}if (column.children && column.children.length > 0) {res.children = handleExportColumnsData(column.children);}return res;};return columns.map(processColumn);
};

引入了 processColumn 函数,用于处理单个列对象。如果列对象具有子列(children),则递归调用 handleExportColumnsData 处理子列,并将处理后的子列添加到结果对象的 children 属性中,从而实现处理多层级嵌套的数据结构。

当然如果想要获取子节点而不是转换数据结构的话,实现如下:

const getChildrenColumns = function (columns = []) {const childColumns = []columns.filter(item => !['action', 'index'].includes(item.dataIndex)).forEach(item => {if (item.children && item.children.length > 0) {const children = getChildrenColumns(item.children)childColumns.push(...children)}if (item.dataIndex) {item.enum && (item.enumMap = getEnumMap(item.enum))childColumns.push({ displayName: item.title, field: item.dataIndex, enumMap: item.enumMap })}})return childColumns
}

使用 getChildrenColumns 遍历列配置,收集所有包含子节点的列以及带有 dataIndex 属性的列,并返回它们的数组。

上述功能需配合后端接口实现的,更多 excel 导出,请参考:导出 excel 表格(纯前端)和下载excel 文件

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

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

相关文章

windows下OOM排查

如下有一段代码 package com.lm.demo.arthas.controller;import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController;import java.util.A…

C++学习day--24 推箱子游戏图像化开发

环境要求: 1、VS2015以上 2、成功安装并配置图形库 项目注意事项:代码复制好以后,把下面的字符集改为多字节字符集 第 1 节 项目需求 实现一款推箱子游戏,效果如下图所示 , 具体规则: 1. 箱子只能推动而不能拉动…

ROS笔记之visualization_msgs-Marker学习

ROS笔记之visualization_msgs-Marker学习 code review! 文章目录 ROS笔记之visualization_msgs-Marker学习一.line_strip例程二.line_list例程一二.line_list例程二二.TEXT_VIEW_FACING例程三.附CMakeLists.txt和package.xml五.关于odom、base_link和map坐标系六.关于visualiz…

TCP / UDP 概念 + 实验(计网自顶向下)

Github源码 moranzcw/Computer-Networking-A-Top-Down-Approach-NOTES: 《计算机网络-自顶向下方法(原书第6版)》编程作业,Wireshark实验文档的翻译和解答。 (github.com) 暂定打算分2步走,前置是中科大对应计网黑书的视频 第1步完成14个Wire…

模数转换器-ADC基础

文章目录 一、ADC是什么二、ADC处理采样保持量化编码三、ADC采样的重要参数:测量范围:分辨率(Resolution):精度:采样时间:采样率(Sampling Rate):信噪比(Signal-to-Noise Ratio, SNR):转换时间:一、ADC是什么 ADC(Analog-to-Digital Converter):模拟数字转换器…

van-uploader上传图片报错Invalid handler for event “load“(在uniapp编译)

van-uploader使用报错 原因:主要原因这里使用的vant版本是2.13.0的,在Hbuild里面运行的项目,vant插件在这里会有部分组件有兼容问题,(van-image,van-uploader等)。 解决:主要是要实…

设置Ubuntu 20.04的静态IP地址(wifi模式下)

一、引言 自己家用的Ubuntu的,重启后ip地址经常会改变,这个时候就需要我们手动配置静态IP了。 二、优点 给Ubuntu设置一个静态IP地址有以下几个好处: 持久性:静态IP地址是固定不变的,与设备的MAC地址绑定。这意味着…

【广州华锐视点】VR飞行员驾驶模拟实训系统

VR飞行员驾驶模拟实训系统是一种基于虚拟现实技术的航空装备仿真测试技术,可以用于飞行员、乘务员和机务人员的训练。该系统可以模拟真实的飞行环境,包括天气、地形、飞机性能等,使被试者能够在虚拟环境中进行飞行操作,从而提高其…

使用证书的方式登录linux 系统或者windows系统

前提 服务端需要先生成自己的一对密钥 ssh-keygen -t rsa -b 4096Windows 1、客户端生成密钥 ssh-keygen -m PEM -t rsa -b 4096 -f C:\Users\SERVER\.ssh\win10_rsa -C win102、服务器端添加刚生成的公钥,将客户端 win10_rsa.pub 中内容追加到文件末尾 vim /…

SSH安全登录远程主机

SSH服务器简介 SSH即Security SHell的意思,它可以将连线的封包进行加密技术,之后进行传输,因此相当的安全。 SSH是一种协议标准,其目的是实现安全远程登录以及其它安全网络服务。 SSH协定,在预设的状态下,…

11月14号|Move生态Meetup相约浪漫土耳其

Move是基于Rust编程语言,由Mysten Labs联合创始人兼CTO Sam Blackshear在Meta的Libra项目中开发而来,旨在为开发者提供比现有区块链语言更通用的开发语言。Sam的目标是创建Web3的JavaScript,即一种跨平台语言,使开发人员能够在多个…

C++设计模式_17_Mediator 中介者

Mediator 中介者也是属于“接口隔离”模式。 文章目录 1. 动机 (Motivation)2. 模式定义3. 结构(Structure)4. 要点总结5. 其他参考 1. 动机 (Motivation) 在软件构建过程中,经常会出现多个对象互相关联交互的情况,对象之间常常会维持一种复杂的引用关系…

HCIA数据通信——基础设备配置

想了想,为了方便回顾复习,将理论和实践结合起来才是正确的,不然一边理论,又单独做实验这样不方便。 因此之前的文章都删了,还是以华为从头开始吧!实验与理论应用结合起来做。 一,查看设备信息 …

windows结束进程并定时重启应用bat脚本

一、关闭进程并启动应用bat脚本 start.bat echo off rem 关闭指定进程 taskkill /f /im test.exeset "logFileWindows\test\Saved\Logs\*.log" rem 如果存在日志文件则删除日志文件 if exist "%logFile%" (del "%logFile%"echo delete success )…

解密Kubernetes:探索开源容器编排工具的内核

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…

【人脸检测 FPS 1000+】ubuntu下libfacedetection tensorrt部署

TensorRT系列之 Windows10下yolov8 tensorrt模型加速部署 TensorRT系列之 Linux下 yolov8 tensorrt模型加速部署 TensorRT系列之 Linux下 yolov7 tensorrt模型加速部署 TensorRT系列之 Linux下 yolov6 tensorrt模型加速部署 TensorRT系列之 Linux下 yolov5 tensorrt模型加速…

《SpringBoot项目实战》第一篇—接口参数的一些弯弯绕绕

系列文章导航 第一篇—接口参数的一些弯弯绕绕 第二篇—接口用户上下文的设计与实现 第三篇—留下用户调用接口的痕迹 第四篇—接口的权限控制 第五篇—接口发生异常如何统一处理 本文参考项目源码地址:summo-springboot-interface-demo 前言 大家好!…

Notepad++安装插件和配置快捷键

Notepad是一款轻量级、开源的文件编辑工具,可以编辑、浏览文本文件、二进制文件、.cpp、.java、*.cs等文件。Notepad每隔1个月,就有一个新版本,其官网是: https://github.com/notepad-plus-plus/notepad-plus-plus。这里介绍其插件…

Harmony 个人中心(页面交互、跳转、导航、容器组件)

个人中心 前言正文一、创建工程二、登录① 更换启动页面② 拓展修饰符③ 页面跳转④ 等待进度条 三、导航栏四、首页① 轮播图② 网格列表 五、我的① 带参数跳转 六、源码 前言 今天是1024,祝各位程序员们,钱多事少离家近,不秃也强bug黄。在…

mac系统u盘启动盘制作教程,更新至macOS Sonoma 14

mac系统怎么制作装系统的u盘,如果您要在多台电脑上安装 macOS,而又不想每次都下载安装器,这时可引导安装器就会很有用。一起来看苹果电脑u盘启动盘制作教程吧。 Macos系统安装包合集包揽macos 10.15,macos 11和苹果最新系统等多个版本 1、A…