Vue使用vxe-table实现Excel单元格数据填充功能

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