news 2026/4/28 11:44:17

vue2 表格如何使用 vxe-table 带列头复制单元格内容同步到 excel 中

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
vue2 表格如何使用 vxe-table 带列头复制单元格内容同步到 excel 中

vue2 表格如何使用 vxe-table 带列头复制单元格内容同步到 excel 中,vxe-table 本身是支持该功能的,通过设置 clip-config.isCopyHeader 启用复制时带列头信息。

https://vxetable.cn

复制粘贴,通过 keyboard-config.isClip 启用,复制带列头功能 clip-config.isCopyHeader 启用

<template><div><vxe-gridv-bind="gridOptions"></vxe-grid></div></template><script>exportdefault{data(){constsexEditRender={name:'VxeSelect',options:[{label:'女',value:'0'},{label:'男',value:'1'}]};constgridOptions={border:true,height:500,showOverflow:true,columnConfig:{resizable:true},mouseConfig:{area:true// 是否开启区域选取},areaConfig:{multiple:true// 是否启用多区域选取功能},clipConfig:{isCopyHeader:true// 是否启用复制自动带表头,启用后影响粘贴功能},editConfig:{mode:'cell',trigger:'dblclick'// 双击单元格激活编辑状态},keyboardConfig:{isAll:true,isClip:true,isEdit:true,isDel:true,isEsc:true// 是否开启Esc键关闭编辑功能},columns:[{type:'seq',fixed:'left',width:60},{field:'name',fixed:'left',title:'名字',editRender:{name:'input'}},{field:'role',title:'角色',editRender:{name:'input'}},{field:'sex',title:'性别',editRender:sexEditRender},{field:'num',title:'分数',editRender:{name:'VxeNumberInput'}},{field:'age',title:'年龄',editRender:{name:'VxeNumberInput'}},{field:'address',title:'地址',width:200,editRender:{name:'input'}}],data:[{id:10001,name:'张三',role:'前端开发',sex:'0',num:23,age:28,address:'北京市17号'},{id:10002,name:'李四',role:'测试人员',sex:'1',num:23,age:22,address:'江苏省27号'},{id:10003,name:'老六',role:'项目经理',sex:'0',num:23,age:32,address:'深圳市19号'},{id:10004,name:'小李',role:'后端开发',sex:'1',num:456,age:24,address:'江苏省47号'},{id:10005,name:'老万',role:'设计师',sex:'1',num:23,age:42,address:'北京市18号'},{id:10006,name:'小刘',role:'前端开发',sex:'0',num:23,age:38,address:'上海市17号'},{id:10007,name:'老徐',role:'测试人员',sex:'1',num:100,age:24,address:'北京市19号'},{id:10008,name:'老二',role:'设计师',sex:'0',num:345,age:34,address:'上海市11号'},{id:10009,name:'小牛',role:'前端开发',sex:'1',num:67,age:52,address:'深圳市29号'},{id:10010,name:'小帅',role:'测试人员',sex:'1',num:23,age:44,address:'北京市37号'},{id:10011,name:'老魏',role:'后端开发',sex:'0',num:56,age:52,address:'深圳市12号'},{id:10012,name:'小徐',role:'测试人员',sex:'1',num:23,age:16,address:'广州市16号'},{id:10013,name:'小张',role:'设计师',sex:'1',num:69,age:16,address:'广州市46号'},{id:10014,name:'老冯',role:'前端开发',sex:'0',num:36,age:36,address:'广州市66号'},{id:10015,name:'小哥',role:'后端开发',sex:'0',num:33,age:47,address:'广州市56号'},{id:10016,name:'李哥',role:'测试人员',sex:'1',num:2,age:42,address:'深圳市16号'}]};return{gridOptions};}};</script>

https://gitee.com/x-extends/vxe-table

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/21 13:02:34

习题与总结

天平 &#xff08;UVa 839 Not so Mobile&#xff09; 递归向下&#xff1a;遇到重量为 0 就深入子树 回溯向上&#xff1a;子树返回自己的总重量和平衡状态 自底向上计算&#xff1a;叶子节点先计算&#xff0c;父节点依赖子节点的结果 #include <bits/stdc.h> usin…

作者头像 李华
网站建设 2026/4/28 10:33:16

为macOS Finder提供直观的剪切粘贴体验

✨ 简介 FinderClip 是一个轻量级的 macOS 菜单栏应用&#xff0c;让你可以在 Finder 中使用熟悉的 ⌘X 和 ⌘V 快捷键来剪切和移动文件&#xff0c;就像在 Windows 中一样自然。 前往GitHub仓库下载 &#x1f3af; 功能特点 功能说明✂️ 真正的剪切在 Finder 中使用 ⌘X 剪…

作者头像 李华
网站建设 2026/4/28 3:18:20

降低AI生成内容比例的网站排名:10大热门平台免费付费对比

&#xfffd;&#xfffd; 10大降AIGC平台核心对比速览 排名 工具名称 降AIGC效率 适用场景 免费/付费 1 askpaper ⭐⭐⭐⭐⭐ 学术论文精准降AI 付费 2 秒篇 ⭐⭐⭐⭐⭐ 快速降AIGC降重 付费 3 Aibiye ⭐⭐⭐⭐ 多学科论文降AI 付费 4 Aicheck ⭐⭐⭐⭐…

作者头像 李华
网站建设 2026/4/28 3:18:39

2026年AI Agent智能体技术发展报告|附85页PDF文件下载

本报告旨在全面、深度地梳理AI Agent技术的最新进展、产业生态格局、应用落地现状以及未来发展趋势。我们希望通过这份白皮书&#xff0c;为广大的AI开发者、技术从业者、企业决策者以及高校研究人员&#xff0c;提供一个权威、专业、前瞻的参考框架&#xff0c;共同迎接和拥抱…

作者头像 李华
网站建设 2026/4/27 20:22:20

YOLO26改进 - SPPF模块 | AIFI基于注意力的尺度内特征交互:替代SPPF构建高效混合编码器,提升模型综合效能

前言 本文介绍了实时检测Transformer&#xff08;RT-DETR&#xff09;及其核心AIFI模块在YOLO26中的结合应用。RT-DETR旨在解决YOLO速度和准确性受NMS负面影响、DETRs计算成本高的问题&#xff0c;通过设计高效混合编码器和解码器层数调整来提升性能。AIFI作为Transformer编码…

作者头像 李华