vue表格vxe-table 单元格拖拽复制填充功能，如何自定义某个列霍某个单元格禁止拖拽复制值，自定义扩展区域赋值方法。比如有很多列， 业务需要实现b列不能拖拽复制单元格值，c列允许拖拽复制单元格值。那么可以使用，自定义扩展区域赋值方法。通过 area-config.extendSetMethod 来重写单元格扩展区域赋值的方法，对拖拽后的单元格赋值进行自定义处理。
当启用 area-config.extendByCopy 或 area-config.extendByCalc 时，如果需要对拖拽后的单元格赋值进行自定义处理时，通过 area-config.extendSetMethod 来重写单元格扩展区域赋值的方法
<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: {
extendByCopy: true, // 是否启用扩展区域自动填充，当选取一个单元格时，自动将当前内容填充到扩展区域的所有单元格中（同时按住 ctrl 键可取消值自动识别数字功能）
// 重写单元格扩展区域赋值的方法
extendSetMethod ({ row, column, cellValue }) {
// 判断单元格是否允许赋值
if (['c', 'd', 'e'].includes(column.field)) {
row[column.field] = cellValue
}
}
},
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>
