企业官网建设流程全解析

在使用 vxe-table 的复制粘贴功能时，复制到剪贴板的文本默认会在末尾附带一个换行符。这在某些场景下（例如直接粘贴到 Excel）会导致多出一个空行。通过 clipConfig.trailingNewline 配置项，可以灵活控制是否保留这个末尾换行符

概述

• 复制粘贴：开启 keyboardConfig.isClip 后，表格支持区域选取与复制粘贴。
• 末尾换行符：默认情况下，复制内容的末尾会带一个换行符。
• 配置项：clipConfig.trailingNewline
  • true（默认）：保留末尾换行符。
  • false：去掉末尾换行符。
• 动态切换：可结合 vxe-switch 实时切换，观察复制效果。

核心配置

启用复制粘贴

keyboardConfig:{isClip:true// 开启复制粘贴}

配置末尾换行符

clipConfig:{trailingNewline:false// 去掉复制内容末尾的换行符}

注意：trailingNewline 表示“是否保留末尾换行符”，而非“是否去掉”。设为 true 时保留，设为 false 时去掉。

区域选取（复制的前提）

mouseConfig:{area:true// 开启区域选取},areaConfig:{multiple:true// 允许多区域选取}

只有开启了区域选取，才能通过鼠标拖拽选择单元格区域进行复制。

代码

<template><div><vxe-switchv-model="clipConfig.trailingNewline"></vxe-switch><vxe-gridv-bind="gridOptions"></vxe-grid></div></template><scriptsetup>import{reactive}from'vue'constsexEditRender=reactive({name:'VxeSelect',options:[{label:'女',value:'0'},{label:'男',value:'1'}]})constclipConfig=reactive({trailingNewline:true// 是否去掉复制内容的末尾换行符})constgridOptions=reactive({border:true,height:500,showOverflow:true,columnConfig:{resizable:true},mouseConfig:{area:true// 是否开启区域选取},areaConfig:{multiple:true// 是否启用多区域选取功能},clipConfig,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>

注意事项

• 与多行复制的关系
  • 复制多行时，行与行之间本身有换行符分隔；trailingNewline 仅控制最后一行之后是否再多一个换行符。
• 其他剪贴板配置
  • clipConfig 还可能包含其他选项（如 copy、paste 等），可根据需要查阅官方文档进行扩展

通过 clipConfig.trailingNewline，可以轻松控制复制到剪贴板的文本末尾是否带换行符。结合 vxe-switch 动态切换，能够适配不同粘贴目标（如 Excel、文本编辑器）的需求，提升数据复制体验。

https://vxetable.cn