Vue通过下拉框选择字典值,并将对应的label以及value值提交到后端

产品品种从字典中获取

产品性质也是从字典中获取

字典当中的保存

dict_type表

 dict_data表

在表单提交的方法中

1.因为做的产品性质是多选,它会以数组的方式提交,所以需要先将Json格式转变为String

  JSON.stringify(this.form.nature)

2.提交表单,先访问了 dict 对象的 type 属性下的 product_breed 数组或对象。

2.1,在 product_breed 中寻找一个对象,其 value 属性等于 this.form.breed 的值。find 方法会遍历数组中的每个元素,如果回调函数返回 true,则返回当前元素。

2.2   ?. 是可选链操作符,如果 find 返回的不是 undefined 或 null,它会继续访问 .label。否则,由于 ?. 后面的表达式不会执行,整个表达式的结果将是 undefined

2.3   || '' 是逻辑或操作符,如果 find 结果(即 ?.label)是 undefined 或 null,则整个表达式的结果将被右侧的空字符串 '' 替代。

 this.$refs["form"].validate((valid) => {if(valid){// 获取breed对应的label值const dictName = this.dict.type.product_breed.find(item => item.value === this.form.breed)?.label || '';this.form.dictName = dictName;  this.$refs["form"].validate((valid) => {if(valid){// 获取breed对应的label值const dictName = this.dict.type.product_breed.find(item => item.value === this.form.breed)?.label || '';this.form.dictName = dictName;  

3.查看操作结果

 addMaterial(this.form).then(response=>{this.$modal.msgSuccess("录入成功");this.open1 = false;this.getList();}

测试结果:

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

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

相关文章

【Linux网络编程】DNS、ICMP、NAT技术、代理服务器+网络通信各层协议总结

DNS、ICMP、NAT技术、代理服务器网络通信总结 1.DNS2.ICMP协议2.1ping命令2.2traceroute命令 3.NAT技术4.NAT和代理服务器5.网线通信各层协议总结 点赞👍👍收藏🌟🌟关注💖💖 你的支持是对我最大的鼓励&…

vue3 依赖-组件tablepage-vue3版本1.0.3更新内容

github求⭐ 可通过github 地址和npm 地址查看全部内容 vue3 依赖-组件tablepage-vue3说明文档,列表页快速开发,使用思路及范例-汇总 vue3 依赖-组件tablepage-vue3说明文档,列表页快速开发,使用思路及范例(Ⅰ&#…

JAVAEE—servlet的概念及使用,使用servlet接口实现一个表白墙

文章目录 servlet的概念静态页面和动态页面servlet的作用 写出一个servlet程序目录的创建设置smart tomcat编写helloworld servlet的概念 首先我们要搞明白什么是servlet,servlet是一种实现动态页面的技术,他是由tomcat提供给程序员的一组API可以帮助程…

【学习笔记二十九】EWM较特殊的业务场景

一、供应商寄售业务相关 1.创建寄售物料、寄售信息记录以及寄售的采购订单 2.创建交货单 3.维护入库交货 行项目里存在C寄售的标识 4.创建上架的仓库任务并确定 查看仓位库存,发现仓位库存里存在寄售标识C以及寄售库存所有方 5.寄售转自有 ①首先MIGO里进行寄…

【吊打面试官系列】Java高并发篇 - Java 中的同步集合与并发集合有什么区别?

大家好,我是锋哥。今天分享关于 【Java 中的同步集合与并发集合有什么区别?】面试题,希望对大家有帮助; Java 中的同步集合与并发集合有什么区别? 同步集合与并发集合都为多线程和并发提供了合适的线程安全的集合&…

微隔离实施五步法,让安全防护转起来

前言 零信任的最核心原则→最小权限 安全的第一性原理→预防 零信任的最佳实践→微隔离 “零信任”这个术语的正式出现,公认是在2010年由Forrester分析师John Kindervag最早提出。时至今日,“零信任”俨然已成安全领域最热门的词汇,做安全…

想要接触网络安全,应该怎么入门学习?

作为一个网络安全新手,首先你要明确以下几点: 我刚入门网络安全,该怎么学?要学哪些东西?有哪些方向?怎么选?这一行职业前景如何? 其次,如果你现在不清楚学什么的话&…

物联网实战--平台篇之(二)基础搭建

目录 一、Qt工程创建 二、数据库知识 三、通信协议 四、名词定义 本项目的交流QQ群:701889554 物联网实战--入门篇https://blog.csdn.net/ypp240124016/category_12609773.html 物联网实战--驱动篇https://blog.csdn.net/ypp240124016/category_12631333.html 一、Qt工程…

如何使用ChatGPT进行高效的中文到科学英文翻译?

如何使用ChatGPT进行高效的中文到科学英文翻译 在全球化加速的今天,科学交流往往需要跨越语言障碍。特别是在科研领域,有效地将中文研究成果转化为精准的科学英语描述,对于学术发表和国际合作尤为关键。AI翻译工具如ChatGPT可以在这一过程中…

ubuntu入门

基础命令 cd 切换命令 ls 查看当前目录下所有的文件 cp a.c b.c 拷贝a.c 到 b.c touch a.c 创建a.c文件 mkdir file 创建文件夹file rm file 删除文件 rmdir 删除test文件夹 rmdir test/ mv 移动文件 mv a.c b.c 把a.c 替换成b.c ifconfig 查看电脑网络信息 rm xx 删…

虹科Pico汽车示波器 | 免拆诊断案例 | 起动机免拆诊断故障 2 例

电磁开关、换向器烧蚀及炭刷磨损均会导致起动机偶尔不工作,使发动机偶尔无法起动。由于故障是偶发的,且没有故障代码,这往往会让维修人员无从下手,而用Pico示波器测量起动电流,就会让这些“亚健康状态”一目了然。 案例…

MongoDB磁盘空间占满,导致数据库被锁定,如何清理数据和磁盘空间

一、问题 1、我在实际项目中,遇到一个问题,随着数据每天的不断增加,导致mongodb的磁盘空间站满了,数据库被锁了,无法使用。 2、故障表现 部署的应用程序突然无法将数据写入数据库,但是可以正常读取数据。…

与 Apollo 共创生态:观看7周年大会的心路历程

前言 在科技飞速发展的今天,自动驾驶技术已然成为行业创新的热点之一。作为一名长期关注自动驾驶领域的技术人员,我有幸见证了Apollo平台的成长与壮大。七年前,Apollo的诞生为我们带来了无尽的想象与期待;七年后的今天&#xff0…

1天搞定uniApp+Vue3+vite+Element UI或者Element Plus开发学习,使用vite构建管理项目,HBuilderX做为开发者工具

我们通常给小程序或者app开发后台时,不可避免的要用到可视化的数据管理后台,而vue和Element是我们目前比较主流的开发管理后台的主流搭配。所以今天石头哥就带大家来一起学习下vue3和Element plus的开发。 准备工作 1,下载HBuilderX 开发者…

STL——stackqueue

stack stack即为栈&#xff0c;先进后出是其特点 栈只有栈顶元素能被外界使用&#xff0c;故不存在遍历行为 栈中常用接口 构造函数 stack<T> stk; //默认构造方式 stack(const stack &stk); //拷贝构造 赋值操作 stack& operator(const stack &stk); …

Linux服务器安全基础 - 查看入侵痕迹

1. 常见系统日志 /var/log/cron 记录了系统定时任务相关的日志 /var/log/dmesg 记录了系统在开机时内核自检的信息&#xff0c;也可以使用dmesg命令直接查看内核自检信息 /var/log/secure:记录登录系统存取数据的文件;例如:pop3,ssh,telnet,ftp等都会记录在此. /var/log/btmp:记…

Flask教程1:flask框架基础入门,路由、模板、装饰器

文章目录 一、 简介二、 概要 一、 简介 Flask是一个非常小的Python Web框架&#xff0c;被称为微型框架&#xff1b;只提供了一个稳健的核心&#xff0c;其他功能全部是通过扩展实现的&#xff1b;意思就是我们可以根据项目的需要量身定制&#xff0c;也意味着我们需要学习各…

(7)快速调优

文章目录 前言 1 安装脚本 2 运行 QuikTune 3 高级配置 前言 VTOL QuikTune Lua 脚本简化了为多旋翼飞行器的姿态控制参数寻找最佳调整的过程。 脚本会缓慢增加相关增益&#xff0c;直到检测到振荡。然后&#xff0c;它将增益降低 60%&#xff0c;并进入下一个增益。所有增…

VScode 无法连接云服务器

试了很多方法&#xff0c;比如更换VScode版本&#xff0c;卸载重装&#xff0c;删除配置文件 重启电脑&#xff0c;都无法成功。最后重置电脑后才连接上&#xff0c;但是重启服务器后又出现该问题。 方法一&#xff1a;修改环境 方法二&#xff1a;把vscode卸载干净重下

JVM支持的可配置参数查看和分类

JVM参数大致可以分为三类: 标注指令:-开头。 这些是所有的HotSpot都支持的参数。可以用java-help 打印出来。 非标准指令: -X开头。 这些指令通常是跟特定的HotSpot版本对应的。可以用java -X打印出来。 不稳定参数: -XX 开头。 这一类参数是跟特定HotSpot版本对应的&#x…