ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

vue 表格组件 vxe-table 复制单元格时去掉末尾换行符

vue 表格组件 vxe-table 复制单元格时去掉末尾换行符 在使用 vxe-table 的复制粘贴功能时复制到剪贴板的文本默认会在末尾附带一个换行符。这在某些场景下例如直接粘贴到 Excel会导致多出一个空行。通过 clipConfig.trailingNewline 配置项可以灵活控制是否保留这个末尾换行符概述复制粘贴开启 keyboardConfig.isClip 后表格支持区域选取与复制粘贴。末尾换行符默认情况下复制内容的末尾会带一个换行符。配置项clipConfig.trailingNewlinetrue默认保留末尾换行符。false去掉末尾换行符。动态切换可结合 vxe-switch 实时切换观察复制效果。核心配置启用复制粘贴keyboardConfig:{isClip:true// 开启复制粘贴}配置末尾换行符clipConfig:{trailingNewline:false// 去掉复制内容末尾的换行符}注意trailingNewline 表示“是否保留末尾换行符”而非“是否去掉”。设为 true 时保留设为 false 时去掉。区域选取复制的前提mouseConfig:{area:true// 开启区域选取},areaConfig:{multiple:true// 允许多区域选取}只有开启了区域选取才能通过鼠标拖拽选择单元格区域进行复制。代码templatedivvxe-switchv-modelclipConfig.trailingNewline/vxe-switchvxe-gridv-bindgridOptions/vxe-grid/div/templatescriptsetupimport{reactive}fromvueconstsexEditRenderreactive({name:VxeSelect,options:[{label:女,value:0},{label:男,value:1}]})constclipConfigreactive({trailingNewline:true// 是否去掉复制内容的末尾换行符})constgridOptionsreactive({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
返回列表