当前位置：首页 > news >正文

vue vxe-table 复制数据到 Excel：支持带表头复制

news 2026/6/14 1:42:59

在日常数据处理中，用户经常需要将表格中的数据复制到 Excel 进行二次编辑或存档。vxe-table 提供了强大的剪贴板功能，通过简单的配置即可实现复制单元格区域时自动包含表头，让粘贴到 Excel 的数据完整且规范。

配置

配置项	类型	说明
clipConfig.isCopyHeader	Boolean	设为 true 后，复制时自动将表头行一起复制到剪贴板。
mouseConfig.area	Boolean	必须设为 true，开启区域选取功能（用户可框选单元格）。
keyboardConfig.isClip	Boolean	必须设为 true，启用键盘复制快捷键（Ctrl + C）。
areaConfig.multiple	Boolean	可选，设为 true 支持同时选取多个不连续区域（按住 Ctrl）。

clipConfig.isCopyHeader 会影响粘贴行为——当启用该配置后，从表格复制的数据将默认包含表头，粘贴时需要注意格式匹配。如果不需要此行为，请保持默认 false。

代码

选中区域：鼠标左键拖拽框选一组单元格，或按住 Ctrl 同时选中多个不连续区域。
复制：按下 Ctrl + C（或右键菜单复制，需自行实现）。
粘贴到 Excel：打开 Excel，选中对应起始单元格，按 Ctrl + V。
结果：Excel 中将出现完整的表头和数据行，与表格中框选的区域结构一致。
注意：由于开启了 isCopyHeader: true，复制的数据第一行为表头。如果只想复制数据而不包含表头，可将该配置设为 false。

<template><div><vxe-gridv-bind="gridOptions"></vxe-grid></div></template><scriptsetup>import{reactive}from'vue'constsexEditRender=reactive({name:'VxeSelect',options:[{label:'女',value:'0'},{label:'男',value:'1'}]})constgridOptions=reactive({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号'}]})</script>