在数据编辑场景中，用户经常需要将某个单元格或区域的内容快速复制到下方单元格。vxe-table 提供了类 Excel 的填充功能：选取区域后按下 Ctrl + D 键，即可将选中区域最上方单元格的值依次填充到下方单元格。
本文将通过完整示例，讲解如何通过 areaConfig.isFillByCopy 配置项启用该功能，并结合区域选取、编辑模式等打造高效的数据录入体验。
相关配置
| 配置路径 | 值示例 | 作用 |
|---|---|---|
| mouseConfig.area | true | 开启单元格区域选取功能（鼠标框选） |
| mouseConfig.extension | true | 开启区域扩展按钮（选中区域右下角的小方块，可拖拽扩大区域） |
| vareaConfig.multiple | true | 允许多个不连续区域选取（按住 Ctrl 多选） |
| areaConfig.isFillByCopy | true | 启用向下填充快捷键：Ctrl + D |
| keyboardConfig.isClip | true | 开启剪贴板快捷键（复制 / 粘贴） |
| editConfig | { mode: 'cell', trigger: 'dblclick' } | 设为单元格编辑模式，双击进入编辑 |
最关键的一点：areaConfig.isFillByCopy 必须设置为 true，否则 Ctrl + D 将无效。
代码
html
<template>
<div>
<vxe-grid v-bind="gridOptions"></vxe-grid>
</div>
</template>
<script setup>
import { reactive } from 'vue'
const gEditRender = reactive({
name: 'VxeSelect',
props: {},
options: [
{ label: 'Develop', value: '1' },
{ label: 'Test', value: '2' },
{ label: 'Designer', value: '3' },
{ label: 'PM', value: '4' }
]
})
const hEditRender = reactive({
name: 'VxeSelect',
props: {
multiple: true
},
options: [
{ label: 'Develop', value: '1' },
{ label: 'Test', value: '2' },
{ label: 'Designer', value: '3' },
{ label: 'PM', value: '4' }
]
})
const gridOptions = reactive({
border: true,
height: 500,
showOverflow: true,
columnConfig: {
resizable: true
},
editConfig: {
mode: 'cell', // 单元格编辑模式
trigger: 'dblclick' // 双击单元格激活编辑状态
},
mouseConfig: {
area: true, // 是否开启区域选取
extension: true // 是否开启区域扩展选取功能，开启后可以通过鼠标左键按住区域内右下角扩展按钮，将区域横向或纵向扩大
},
areaConfig: {
multiple: true, // 是否启用多区域选取功能
isFillByCopy: true // 是否启用选中复制填充功能，自动把上面的单元格内容填到下面（按 ctrl + D 键触发）
},
keyboardConfig: {
arrowCursorLock: true, // 方向键光标锁，开启后处于非聚焦式编辑状态，将支持在编辑状态中通过方向键切换单元格。（切换为聚焦编辑状态，可以按 F2 键或者鼠标左键点击输入框，就可以用方向键左右移动输入框的光标）
isAll: true, // 是否启用快捷键全选
isClip: true, // 是否开启复制粘贴
isArrow: true, // 是否开启方向键功能
isShift: true, // 是否开启同时按住方向键以活动区域为起始，向指定方向扩展单元格区域
isTab: true, // 是否开启 Tab 键功能
isEnter: true, // 是否开启回车键功能
isEdit: true, // 是否开启任意键进入编辑（功能键除外）
isDel: true, // 是否开启删除键功能
isEsc: true, // 是否开启Esc键关闭编辑功能
isFNR: true // 是否开启查找与替换
},
columns: [
{ type: 'seq', width: 60 },
{ field: 'a', title: 'A', editRender: { name: 'VxeInput' } },
{ field: 'b', title: 'B', editRender: { name: 'VxeInput' } },
{ field: 'c', title: 'C', editRender: { name: 'VxeInput' } },
{ field: 'd', title: 'D', editRender: { name: 'VxeInput' } },
{ field: 'e', title: 'E', editRender: { name: 'VxeInput' } },
{ field: 'f', title: 'F', editRender: { name: 'VxeInput' } },
{ field: 'g', title: 'G单选', editRender: gEditRender },
{ field: 'h', title: 'H多选', minWidth: 200, editRender: hEditRender }
],
data: [
{ id: 10001, a: 'Test1', b: 'Develop', c: 'Man', d: '23', e: '28', f: '', g: '', h: [] },
{ id: 10002, a: 'Test2', b: 'Test', c: 'Women', d: '23', e: '22', f: '', g: '', h: [] },
{ id: 10003, a: 'Test3', b: 'PM', c: 'Man', d: '23', e: '32', f: '', g: '4', h: ['3', '4'] },
{ id: 10004, a: 'Test4', b: 'Designer', c: 'Women', d: '456', e: '24', f: '', g: '2', h: ['2', '3', '4'] },
{ id: 10005, a: 'Test5', b: 'Designer', c: 'Women', d: '23', e: '42', f: '', g: '1', h: ['1', '2'] },
{ id: 10006, a: 'Test6', b: 'Designer', c: 'Man', d: '23', e: '38', f: '', g: '3', h: [] },
{ id: 10007, a: 'Test7', b: 'Test', c: 'Women', d: '100', e: '24', f: '', g: '', h: [] },
{ id: 10008, a: 'Test8', b: 'PM', c: 'Man', d: '345', e: '34', f: '', g: '', h: [] },
{ id: 10009, a: 'Test9', b: 'Designer', c: 'Man', d: '67', e: '52', f: '', g: '', h: [] },
{ id: 10010, a: 'Test10', b: 'Test', c: 'Women', d: '23', e: '44', f: '', g: '', h: [] }
]
})
</script>说明
- 选取区域
- 鼠标左键按住并拖拽，可以框选一个矩形区域（连续单元格）。
- 按住 Ctrl 键可以同时选中多个不连续的区域。
- 向下填充（Ctrl + D）
- 选中一个多行区域（例如 A2:C5），按下 Ctrl + D。
- 系统会将选中区域最上方那一行的值，复制到该区域下方的每一行中。
- 如果选中的区域只有一列，则会把顶部单元格的值向下填充至该列剩余行。
- 支持编辑器类型
- 普通输入框（VxeInput）→ 值直接复制。
- 单选下拉（VxeSelect）→ 选中的值（value）被复制。
- 多选下拉（multiple: true）→ 数组形式的选中值被完整复制。
- 区域扩展按钮
- 当选中一个区域后，右下角会出现一个小方块，鼠标按住并拖拽可以横向或纵向扩展选区，扩展后区域内单元格内容会自动填充（类似 Excel 的填充柄）。