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

vue 表格 vxe-table 实现复制单元格时自动带表头

vue 表格 vxe-table 实现复制单元格时自动带表头,由于业务需求需要实现用户复制单元格粘贴到 excel 时,不知道对应是哪一列,要求需要在粘贴时自动带上表头,可以通过自带的 isCopyHeader 来启用

https://vxetable.cn

table_clip_copy_head

通过 clip-config.isCopyHeader 启用

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

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

http://www.jsqmd.com/news/407286/

相关文章:

  • 年后处理盒马鲜生礼品卡,避开这些误区,变现更顺利 - 团团收购物卡回收
  • 收藏!揭秘AI大模型高薪背后的秘密,小白也能入局!
  • 【完整源码+数据集+部署教程】汽车部件实例分割系统源码&数据集分享 [yolov8-seg-C2f-DAttention&yolov8-seg-C2f-Faster-EMA等50+全套改进创新点发刊
  • 新托福时代下,2026年托福培训机构排名榜单TOP10 - 速递信息
  • 天虹购物卡回收流程详解:快速变现你的闲置购物卡 - 团团收购物卡回收
  • Luogu P4035 [JSOI2008] 球形空间产生器 题解
  • DeepSeek 怎么做广告?DeepSeek 推广服务商有哪些? - 品牌2025
  • 舞东方教育:深耕舞蹈艺考三十载 以专业赋能校考冲刺与升学规划 - 深度智识库
  • 上海智推时代:AI 优化、GEO 优化官方合作咨询入口 - 速递信息
  • windows统计目录 - 规格严格
  • 智推时代 GEO 服务:官方咨询通道与对接指引全览 - 速递信息
  • 智推时代 AI 优化服务:官方联络方式与商务对接指南 - 速递信息
  • 2026福州婚姻家事律师推荐:福州抚养权纠纷律师、福州拆迁补偿律师、福州民间借贷律师、福州离婚律师选择指南 - 优质品牌商家
  • Arrays.asList方法踩坑
  • ABB称重传感器PFTL101AER-1.0KN
  • 环球骑行
  • python-django基于人脸识别的智慧医疗预约挂号平台 医生排班
  • 2026年托福机构推荐榜单:新托福时代,谁是最强提分王者? - 速递信息
  • 2026年可靠的货架厂推荐,提供货架厂家直销源头工厂拆装服务 - 工业品牌热点
  • 五个女博士 2026 可信度解析:被国家认可吗|东西怎么样 - 速递信息
  • 2026大数据风口下,中专/大专生如何靠证书逆袭大厂?
  • 精准对接智推时代:官方沟通渠道与咨询入口全面整理 - 速递信息
  • python-django可视化人工智能知识科普平台 ai客服 人脸识别840p03tc
  • 智推时代官方服务:AI 优化与 GEO 优化合作咨询入口 - 速递信息
  • megatron_actor
  • 2026年大理短租民宿推荐:熹庭Villas如何解决家庭度假3大痛点 - 速递信息
  • 2026年植物提取物厂家TOP3推荐:三大苦参碱/花青素厂家优选指南! - 深度智识库
  • 2026 年雅思培训机构推荐榜单TOP10 | 多维度评估 - 速递信息
  • HoRain云--Windows文件名非法字符终极解决指南
  • vue 表格 vxe-table 如何实现拖拽单元格自动复制内容功能