<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' // 雙擊單元格激活編輯狀態(tài)
  },
  mouseConfig: {
    area: true, // 是否開啟區(qū)域選取
    extension: true // 是否開啟區(qū)域擴展選取功能，開啟后可以通過鼠標左鍵按住區(qū)域內(nèi)右下角擴展按鈕，將區(qū)域橫向或縱向擴大
  },
  areaConfig: {
    multiple: true, // 是否啟用多區(qū)域選取功能
    isFillByCopy: true // 是否啟用選中復制填充功能，自動把上面的單元格內(nèi)容填到下面（按 ctrl + D 鍵觸發(fā)）
  },
  keyboardConfig: {
    arrowCursorLock: true, // 方向鍵光標鎖，開啟后處于非聚焦式編輯狀態(tài)，將支持在編輯狀態(tài)中通過方向鍵切換單元格。（切換為聚焦編輯狀態(tài)，可以按 F2 鍵或者鼠標左鍵點擊輸入框，就可以用方向鍵左右移動輸入框的光標）
    isAll: true, // 是否啟用快捷鍵全選
    isClip: true, // 是否開啟復制粘貼
    isArrow: true, // 是否開啟方向鍵功能
    isShift: true, // 是否開啟同時按住方向鍵以活動區(qū)域為起始，向指定方向擴展單元格區(qū)域
    isTab: true, // 是否開啟 Tab 鍵功能
    isEnter: true, // 是否開啟回車鍵功能
    isEdit: true, // 是否開啟任意鍵進入編輯（功能鍵除外）
    isDel: true, // 是否開啟刪除鍵功能
    isEsc: true, // 是否開啟Esc鍵關(guān)閉編輯功能
    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>