news 2026/3/2 7:12:43

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
vue表格vxe-table 单元格拖拽复制填充功能,如何自定义某个列霍某个单元格禁止拖拽复制值,自定义扩展区域赋值方法

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>

https://gitee.com/x-extends/vxe-table

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/3/1 23:38:50

浔川社团与暮烟社团强强联合

浔川社团与暮烟社团强强联合 重磅打造浔川代码编辑器与浔川 AI 翻译 开启社团特色发展新赛道一、核心合作产品&#xff1a;双引擎驱动创新浔川代码编辑器核心定位&#xff1a;轻量高效、适配校园学习与实践场景核心功能&#xff1a;覆盖 Python、C、Java 等主流编程语言&#x…

作者头像 李华
网站建设 2026/3/1 15:50:52

分布式光纤传感预警系统

一、分布式光纤传感的原理分布式光纤传感技术(Distributed Optical Fiber Sensing Technology&#xff0c;DOFS)&#xff0c;基于光纤的光学特性&#xff0c;通过测量光纤中瑞利散射、布里渊散射或拉曼散射等光散射现象&#xff0c;实现沿线声波振动、温度、应变物理量的连续分…

作者头像 李华
网站建设 2026/3/1 14:25:33

XMedia Recode v3.6.2.5:免费全能视频格式转换器

XMedia Recode v3.6.2.5 中文版是一款完全免费的全能视频转换软件&#xff0c;支持 DVD、AVI、MP4 等主流媒体格式&#xff0c;适配多品牌设备&#xff0c;兼具视频剪辑、音频提取等实用功能&#xff0c;操作简单且转换质量稳定&#xff0c;无论是新手还是专业用户都能轻松上手…

作者头像 李华
网站建设 2026/3/1 20:34:42

71、IMX6ULL驱动进阶:ioctl命令机制与platform总线

IMX6ULL驱动进阶&#xff1a;ioctl命令机制与platform总线 一、核心技术原理精讲 1.1 ioctl接口&#xff1a;高效设备控制的底层逻辑 1.1.1 什么是ioctl&#xff1f; ioctl&#xff08;Input/Output Control&#xff09;是Linux内核提供的专用设备控制接口&#xff0c;允许…

作者头像 李华
网站建设 2026/3/2 6:28:53

中国大陆主流AIGC视频生成模型技术调研表(2026最新)

中国大陆主流AIGC视频生成模型技术调研表&#xff08;2026最新&#xff09; 按功能类别分类整理 整理说明&#xff1a;包含入参、出参、部署方式、4090显卡需求、8卡4090并发数等核心维度&#xff0c;无公开数据标注为「未公开」一、文生视频&#xff08;文本→视频&#xff09…

作者头像 李华
网站建设 2026/2/22 9:45:35

西工大《Energy Stor. Mater.》突破:闪蒸焦耳热“三合一”工艺,1秒构筑SiC铠甲,硅负极容量超2600mAh/g

导语 面对特斯拉4680电池、宁德时代凝聚态电池对高能量密度负极的迫切需求&#xff0c;硅基材料因其十倍于石墨的理论容量&#xff0c;被视为下一代锂电的“圣杯”。然而&#xff0c;其产业化道路被“体积膨胀-界面不稳-导电性差”三大顽疾牢牢锁死。传统的纳米化、复合包覆等方…

作者头像 李华