vxe-table 监听某一列的值

需求:根据A列的内容,B列显示下拉框,文本,数值类型的数据
总思路:设置元素点击(cell-click)、双击事件(cell-dblclick),拿到当前行的数据,监听当前行的A列,如果变化,B列做相应处理。文本和数值通过input中的type设置。
min=“0”,表示数值最小为0

<vxe-tableref="specialHandTable"border:scroll-y="{ enabled: false }"height="320"align="center"size="mini":column-config="{ resizable: true }":data="tableData":edit-config="{ trigger: 'click', mode: 'cell' }":row-config="{ isCurrent: true, isHover: true }"@cell-click="cellClickEvent"@cell-dblclick="cellClickEvent"><vxe-column type="seq" width="10%"></vxe-column>    <vxe-column field="AColumn" title="A列数据" width="25%" :edit-render="{ enabled:IsEdit }"><template #edit="{ row }"><vxe-select v-model="row.AColumn"  clearable filterable transfer  @change="change(row)"><vxe-option v-for="item in AColumnList" :key="item" :label="item" :value="item" ></vxe-option></vxe-select></template></vxe-column><vxe-column field="BColumn" title="B列值" width="35%" :edit-render="{ enabled:IsEdit}"><template #default="{ row }"><span>{{ formatBColumnOptions(row) }}</span></template><template #edit="{ row }"><vxe-input v-if="!IsSelect" v-model="row.BColumn" :type="inputType" min="0"></vxe-input><vxe-select v-else v-model="row.BColumn"  clearable filterable transfer multiple><vxe-option v-for="item in BColumnList" :key="item.SubItemCode" :label="item.SubItemName" :value="item.SubItemCode" ></vxe-option></vxe-select></template></vxe-column>     </vxe-table>data()
{
return{
AColumnList:[],//A列下拉框数据
BColumnList:[],//B列下拉框数据
inputType:'text',
tableData:[],//table数据
selectedRow:null,//选中的值
IsSelect:false,//BColumn是否显示下拉框
}
}methods:{cellClickEvent({ row, rowIndex }){this.selectedRow = row;this.selectedRow.RowIndex = rowIndex;},//改变A列的值,清空对应B列的值change(row){if(row.AColumn =="下拉框"){this.$set(this.selectedRow,'BColumn',[]);  }else{this.$set(this.selectedRow,'BColumn',"");  }},async AColumnChange(name){this.IsSelect = false;this.BColumnList=[];this.inputType ="text";switch(name){case "下拉框"://下拉框this.IsSelect = true;await  GetBColumnList().then((res) => {this.BColumnList = res.Data.Data.map((item)=>{return {SubItemName: item.名称,SubItemCode: item编码.}})});break;case "数值":this.inputType ="number";break;default:break;}},//转换BColumn下拉框的值formatBColumnOptions(row){if(row.AColumn == "下拉框"){let options = this.BColumnList;const item = options.filter((item) => row.BColumn.includes(item.SubItemCode))let value = "";if(item.length>0){value = item.map((t) => {return  t.SubItemName;}).join(",");}return value;        }else{return row.BColumn;}       },
},watch: {'selectedRow.AColumn':{deep:true,handler(val){if(val!=undefined){this.AColumnChange(val);}else{this.IsSelect = false;}      }}},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/852586.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

oracle跨版本exdp 从高版本到低版本 从18c到10g

由于工作需要&#xff0c;有时候需要将oracle18c的数据同步到另一个环境的10g版本 测试环境 &#xff1a; 源数据库版本&#xff1a;18.13.0.0 目标数据库版本&#xff1a;10.2.0.4 结论&#xff1a; 1 从低版本导出&#xff0c;导入到高版本&#xff0c;可以&#xff0c;不…

vue3:父组件如何给子组件传值

在 Vue 3 中&#xff0c;父组件可以通过 props 将数据传递给子组件。下面是一个简单的例子来展示如何实现这一点。 父组件&#xff08;ParentComponent.vue&#xff09; <template><div><h1>父组件</h1><ChildComponent :message"parentMess…

VMware清理拖拽缓存

磁盘空间越用越小&#xff0c;如何快速解决磁盘空间的问题&#xff0c;甩掉烦恼 安装VM tools之后可以通过拖拽的方式把文件拉入虚拟机之中。但每一次拖拽&#xff0c;其实都是现在cache文件夹里面生成一个同样的文件&#xff0c;并使用cp拷贝的方式将其拷贝到拖拽放置的目录中…

C# WPF入门学习主线篇(二十六)—— 绑定路径和数据上下文

C# WPF入门学习主线篇&#xff08;二十六&#xff09;—— 绑定路径和数据上下文 在WPF&#xff08;Windows Presentation Foundation&#xff09;中&#xff0c;数据绑定是一个核心概念&#xff0c;它允许你将UI控件的属性与数据源属性进行绑定&#xff0c;从而实现数据和UI的…

从零学习es8

配置 编辑 elasticsearch.yml xpack.security.enabled: true 单节点 discovery.type: single-node设置账号&#xff1a; elasticsearch-reset-password -u elastic 如果要将密码设置为特定值&#xff0c;请使用交互式 (-i) 参数运行该命令。 elasticsearch-reset-password -i…

05-腾讯云Copilot及 向量数据库AI套件介绍

1 Andon Copilot核心功能介绍 2 Andon Copilot覆盖腾讯云售后、售前场景 3 腾讯云向量数据库– AI套件效果 AI 套件是腾讯云向量数据库&#xff08;Tencent Cloud VectorDB&#xff09;提供的一站式文档检索解决方案&#xff0c;包含自动化文档解析、信息补充、向量化、内容检…

HTTPS请求阶段图解分析

HTTPS请求阶段分析 请求阶段分析 请求阶段分析 一个完整、无任何缓存、未复用连接的 HTTPS 请求需要经过以下几个阶段&#xff1a; DNS 域名解析、TCP 握手、SSL 握手、服务器处理、内容传输。 一个 HTTPS 请求共需要 5 个 RTT 1 RTT&#xff08;域名解析&#xff09; 1 RTT…

工业4.0下的PLC进化论:ARMxy计算机如何重塑自动化

智能物流系统的高效与精准成为企业竞争力的关键。在这个背景下&#xff0c;传统的PLC系统因其固有的局限性&#xff0c;如扩展性差、系统封闭等&#xff0c;开始显得力不从心。ARMxy工业计算机作为新一代的PLC替代方案&#xff0c;凭借其低功耗、高性能以及高度的灵活性&#x…

Ubuntu 22.04 在线安装dockers报错

一、报错描述 在ubuntu 22.01上执行在线安装docker命令时出现E: Package docker-ce has no installation candidate错误。 sudo apt install docker-ce docker-ce-cli containerd.io 下面是详细报错信息 rootubuntu:# sudo apt install docker-ce docker-ce-cli containerd…

H5单点登录分析介绍(登录状态检验状态透传分析)

文章目录 1、单点登录解决方案1.1、后端保存登录状态1.2、token模式 2、user服务-登录接口2.1、UserController2.2、UserInfoServiceImpl2.3、载荷2.4、响应2.5、Redis Desktop Manager 3、user服务-登录成功获取用户信息回显3.1、UserController3.2、UserInfoServiceImpl3.3、…

Unity资源 之 最受欢迎的三消游戏开发包 - Bubble Shooter Kit 【免费领取】

三消游戏开发包 - Bubble Shooter Kit 免费领取 前言资源包内容领取兑换码 前言 如果你是一名 Unity 游戏开发者&#xff0c;并且正在寻找一种快速、简单的方式来创建自己的三消游戏&#xff0c;那么 Bubble Shooter Kit 就是你所需要的。 资源包内容 Bubble Shooter Kit 是…

[Qt]Qt中的QPainter绘制在哪的问题

QPainter绘制的内容是在哪儿呢&#xff1f; QPainter 与不同的 QPainterDevice 类交互&#xff08;例如窗口、pixmap、printer 等&#xff09;&#xff0c;通过 QPainterDevice 的 begin() 和 end() 方法以及 QPaintDeviceMetrics 来控制绘画设备。 如果把 QImage 作为 QPainte…

英文语法工具Grammarly for Word下载和安装

前言&#xff1a;论文写作语法检查和润色的时候&#xff0c;可以用Grammarly进行帮助。 Grammarly for Word的下载、安装、使用 官网下载Grammarly for Microsoft Office安装GrammarlyWord使用GrammarlyGrammarly使用 官网下载Grammarly for Microsoft Office 地址&#xff1…

【全开源】ChatGPT 机器人公众号小程序h5源码开源交付支持二开

AI机器人系统对接OPENAI&#xff1a;智能互联的无限可能 &#x1f310; 一、引言&#xff1a;AI机器人系统与OPENAI的碰撞 在科技日新月异的今天&#xff0c;AI机器人系统正逐渐渗透到我们生活的各个角落。而当这一智能系统与全球领先的OPENAI技术相结合&#xff0c;又将擦出…

【CT】LeetCode手撕—33. 搜索旋转排序数组

目录 题目1-思路1-1 模式识别&#xff1a;1-2 二分模板 && 本质二分红色边界二分绿色边界 1-3 本题思路①二分出第一个区间②判断 target 在哪个区间③利用二分性质 2- 实现⭐33. 搜索旋转排序数组——题解思路 3- ACM实现 题目 原题连接&#xff1a;33. 搜索旋转排序…

MathTpye7最新版软件下载与安装步骤2024最新新手小白教程

在2024年&#xff0c;作为软件开发者的你&#xff0c;一定知道MathType这款广受欢迎的数学公式编辑器吧&#xff01;&#x1f4f1;&#x1f50b;&#x1f4b0;&#x1f9ee; MathType是一款功能强大的数学公式编辑工具。无论是学术研究&#x1f4da;还是数字教育&#x1f469;‍…

火车头采集怎么使用GPT等AI原创文章

火车头采集官方并没有GPT、百度文心一言AI、阿里通义千问AI、Kimi大模型等AI功能&#xff0c;但支持接入插件&#xff0c;可以编写相应人工智能AI原创文章插件&#xff08;火车头采集支持PHP和c#这2种语言的插件编写&#xff09;&#xff0c;或者导入第三方封装好的GPT等AI原创…

【数据结构与算法】图的基本概念

文章目录 图的基本概念定义常用术语有向图无向图简单图、多重图完全图&#xff08;简单完全图&#xff09;子图连通、连通图和连通分量强连通图、强连通分量边的权和网稠密图、稀疏图路径、路径长度和回路简单路径、简单回路距离有向树 图的基本概念 定义 图是一种非线性的逻…

【收藏】Web 前端知识体系精简【文末福利!】赠2024Web 前端/安全工程师资料视频教程+源码+课件

目录 JAVASCRIPT 篇 0、基础语法 1、函数原型链 2、函数作用域 3、函数指针 this 4、构造函数 new 5、闭包 6、单线程和异步队列 7、异步通讯 Ajax技术 8、DOM对象 document 9、事件系统 Event 10、全局对象 window CSS 篇 1、选择器 2、定位 3、浮动 4、盒子…

人脸识别系统---人脸对比

一、人脸对比 1.定义全局变量来存储选择的图片路径和标签 save_image1 None save_image2 None image_label1 None image_label2 None2.定义了一个名为compare_faces的函数&#xff0c;用于比较两张图片中的人脸是否相似 def compare_faces():if save_image1 and save_im…