vue 表格组件 vxe-table 复制选中单元格到 Excel 时自动带上表头

使用 vxe-table 的复制功能时，默认只复制选中的数据，不带表头。通过 clipConfig.isCopyHeader 可以让复制内容自动附带列表头，粘贴到 Excel 后每列有明确标题。但该配置会同时影响粘贴行为，需要提前了解副作用。

vxe-table 如何让复制的单元格自动带上表头？

在 clipConfig 中设置 isCopyHeader: true，复制选中区域时文本首行会加入对应列的表头。

• 生效前提：
• keyboardConfig.isClip 必须为 true，否则复制功能整体不可用。
• mouseConfig.area 必须为 true，否则无法通过鼠标选中区域。
• 该配置会同时改变粘贴的解析逻辑，粘贴到表格时首行会被识别为表头数据。

需要注意：启用后，如果再从剪贴板粘贴回 vxe-table，粘贴内容中的第一行会被当作表头处理，导致单元格多出一个表头行或数据错位。若项目同时依赖复制和粘贴，建议按场景动态开关该配置。

代码

下面的配置用于启用区域选取与复制粘贴，并开启“复制自动带表头”

<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>

• 预期结果：
  • 鼠标拖拽选中若干单元格后按 Ctrl + C，剪贴板内容首行为对应列标题，下方为选中数据。
  • 直接粘贴到 Excel，第一行即为表头，列含义清晰。
  • 粘贴回 vxe-table 时，首行会被识别为表头，可能多出一行，需注意此副作用。

相关配置参数

配置项	类型	默认值	说明
clipConfig.isCopyHeader	Boolean	false	复制时是否自动附带表头；开启后影响粘贴解析
keyboardConfig.isClip	Boolean	false	复制粘贴总开关，必须开启
mouseConfig.area	Boolean	false	区域选取总开关，复制的前提
areaConfig.multiple	Boolean	false	是否允许多区域选取
clipConfig.trailingNewline	Boolean	true	复制文本末尾是否保留换行符，与表头配置可组合使用

注意事项

• 复制与粘贴的联动影响
  • isCopyHeader 是复制与粘贴共用的解析规则。开启后，复制会带表头，粘贴也会按“首行是表头”解析。若业务同时需要两种行为，可提供开关让用户选择，或在不同场景下动态切换 clipConfig.isCopyHeader。
• 表头取列 title
  • 复制出的表头来自列的 title 字段。若列为 type: 'seq' 等非字段列，表头取该列的 title，未设置时可能为空，建议为每个列显式设置 title。
• 多区域选取下的表头
  • areaConfig.multiple: true 允许选择不连续区域。复制多个区域时，表头会按各区域对应的列分别附加，粘贴到 Excel 时可能出现多段表头，建议在文档中说明。

https://vxetable.cn