当前位置：首页 > news >正文

vue表格vxe-table 单元格拖拽复制填充功能，如何自定义某个列霍某个单元格禁止拖拽复制值，自定义扩展区域赋值方法

news 2026/3/27 6:05:44

vue表格vxe-table 单元格拖拽复制填充功能，如何自定义某个列霍某个单元格禁止拖拽复制值，自定义扩展区域赋值方法。比如有很多列，业务需要实现b列不能拖拽复制单元格值，c列允许拖拽复制单元格值。那么可以使用，自定义扩展区域赋值方法。通过 area-config.extendSetMethod 来重写单元格扩展区域赋值的方法，对拖拽后的单元格赋值进行自定义处理。

https://vxetable.cn

当启用 area-config.extendByCopy 或 area-config.extendByCalc 时，如果需要对拖拽后的单元格赋值进行自定义处理时，通过 area-config.extendSetMethod 来重写单元格扩展区域赋值的方法

<template><div><vxe-gridv-bind="gridOptions"></vxe-grid></div></template><scriptsetup>import{reactive}from'vue'constgEditRender=reactive({name:'VxeSelect',props:{},options:[{label:'Develop',value:'1'},{label:'Test',value:'2'},{label:'Designer',value:'3'},{label:'PM',value:'4'}]})consthEditRender=reactive({name:'VxeSelect',props:{multiple:true},options:[{label:'Develop',value:'1'},{label:'Test',value:'2'},{label:'Designer',value:'3'},{label:'PM',value:'4'}]})constgridOptions=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>