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

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

news 2026/5/12 14:57:55

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>