news 2026/5/23 15:38:49

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/5/21 13:32:20

在腾讯 CloudStudio 上部署 Moltbot 接入钉钉完整教程

继《Moltbot 接入飞书》和《Moltbot 接入企业微信》后,本文将详细介绍如何将 Moltbot 接入钉钉,实现智能 AI 助手功能。钉钉官方已开源 Moltbot 连接器,让接入变得更加简单! 一、前期准备 1.1 所需资源清单 在开始部署之前,请确保准备好以下资源: ✅ 钉钉企业账号:需要企业管…

作者头像 李华
网站建设 2026/5/22 5:28:16

HCIP 第一次作业

二、实验需求&#xff1a;qqw三、实验步骤-----思路1、首先&#xff0c;创建vlan并将相应端口划分到vlan中&#xff0c;满足PC1和PC3在vlan2的要求。2、为处于同一网段的PC2、PC4、PC5、PC6配置IP地址范围&#xff08;通过DHCP自动获取&#xff09;&#xff0c;同时设置访问控制…

作者头像 李华
网站建设 2026/5/15 23:13:06

CANN 生态实战:利用 `ge-graph-engine` 构建高性能 AI 推理流水线

CANN 生态实战&#xff1a;利用 ge-graph-engine 构建高性能 AI 推理流水线 cann组织链接&#xff1a;https://atomgit.com/cann ops-nn仓库链接&#xff1a;https://atomgit.com/cann/ops-nn 在深度学习模型从训练走向部署的过程中&#xff0c;图优化与执行引擎扮演着至关重要…

作者头像 李华
网站建设 2026/5/22 12:18:44

AI Agent革命:从“嘴炮王“到“行动派“的效率跨越

文章探讨了AI从"会说话"到"会干活"的革命性跨越&#xff0c;介绍了AI Agent相比传统LLM的三大优势&#xff1a;记忆能力、工具使用能力和目标驱动执行力。重点讲解了MCP协议如何解决API对接问题&#xff0c;以及Agent to Agent协作模式的专业分工力量。通过…

作者头像 李华
网站建设 2026/5/16 2:42:48

惊!汉阳天玑AIGEO优化系统代理机会别错过!

在数字化营销的浪潮中&#xff0c;天玑AIGEO优化系统领域已成为众多企业发展的关键着力点&#xff0c;但当前该领域也面临着诸多技术挑战&#xff0c;天玑AI互联网中心的出现&#xff0c;为解决这些问题带来了新的方案。行业痛点分析当前天玑AIGEO优化系统领域存在着精准营销难…

作者头像 李华
网站建设 2026/5/23 12:36:03

深入解析C4模型与ArchiMate:企业架构可视化中的选择与融合

在现代软件开发与企业架构实践中&#xff0c;可视化工具已成为连接业务与技术、促进跨团队协作的关键手段。然而&#xff0c;面对众多建模语言和框架&#xff0c;如何为不同场景选择合适的架构表达方式&#xff0c;是每一位架构师、产品经理和开发团队都必须面对的问题。本文将…

作者头像 李华