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.hqwc.cn/news/661041.html

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

相关文章

Flutter笔记:Widgets Easier组件库(1)使用各式边框

Flutter笔记 Widgets Easier组件库(1):使用边框 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite:http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress o…

java-springmvc 01 补充 javaweb 三大组件Servlet,Filter、Listener(源码都是tomcat8.5项目中的)

01.JavaWeb三大组件指的是:Servlet、Filter、Listener,三者提供不同的功能 这三个在springmvc 运用很多 Servlet 01.Servlet接口: public interface Servlet {/*** 初始化方法* 实例化servlet之后,该方法仅调用一次 * init方法必须执行完…

华为5700配置

恢复出厂设置,清空配置 1、更改名字 system-view sysname tp-10-50-01-04 2、配置管理接口 int vlan 1 ip add 10.50.1.4 255.255.254.0 quit 2、链路汇聚 interface eth-trunk 1 mode lacp quit 3、绑定端口 interface eth-trunk 1 trunkport gigabitethernet …

C语言-嵌入式-STM32:FreeRTOS说明和详解

Free即免费的,RTOS的全称是Real time operating system,中文就是实时操作系统。 注意:RTOS不是指某一个确定的系统,而是指一类操作系统。比如:uc/OS,FreeRTOS,RTX,RT-Thread 等这些都…

【语音识别】搭建本地的语音转文字系统:FunASR(离线不联网即可使用)

参考自: 参考配置:FunASR/runtime/docs/SDK_advanced_guide_offline_zh.md at main alibaba-damo-academy/FunASR (github.com)参考配置:FunASR/runtime/quick_start_zh.md at 861147c7308b91068ffa02724fdf74ee623a909e alibaba-damo-aca…

动手学深度学习——softmax分类

1. 分类问题 回归与分类的区别: 回归可以用于预测多少的问题, 比如"预测房屋被售出价格",它是个单值输出。softmax可以用来预测分类问题,例如"某个图片中是猫、鸡还是狗?",这是一个多…

鸿蒙准备1

鸿蒙心路 感慨索性, 看看鸿蒙吧。打开官网相关介绍 新建工程目录结构 感慨 最近面试Android应用开发,动不动就问framework的知识,什么touch事件的触发源是啥(eventHub),gc流程是啥,图形框架是什…

Vue入门到关门之Vue项目工程化

一、创建Vue项目 1、安装node环境 官网下载,无脑下一步,注意别放c盘就行 Node.js — Run JavaScript Everywhere (nodejs.org) 需要两个命令 npm---->pipnode—>python 装完检查一下,hello world检测,退出crtlc 2、搭建vu…

Python 与 TensorFlow2 生成式 AI(五)

原文:zh.annas-archive.org/md5/d06d282ea0d9c23c57f0ce31225acf76 译者:飞龙 协议:CC BY-NC-SA 4.0 第十二章:用生成式人工智能玩视频游戏:GAIL 在之前的章节中,我们已经看到如何使用生成式人工智能来生成…

【iOS】消息流程分析

文章目录 前言动态类型动态绑定动态语言消息发送objc_msgSendSEL(selector)IMP(implementation)IMP高级用法 MethodSEL、IMP、Method总结流程概述 快速查找消息发送快速查找的总结buckets 慢速查找动态方法解析resolveInstanceMet…

HIVE启动步骤

不如意的时候不要尽往悲伤里钻 想想有笑声的日子 启动HIEV 1.启动虚拟机Hadoop集群 2.连接Linux 3.start-all.sh 4.hive 5.hive启动时报错 当我们启动Hadoop集群时 启动hive可能会出现卡在true处不动的情况 那么我们只需要做一个操作就可以解决问题啦 hdfs haadmin -transitio…

CTF-Show nodejs

web334 下载附件,有两个文件 在Character.toUpperCase()函数中,字符ı会转变为I,字符ſ会变为S。 在Character.toLowerCase()函数中,字符İ会转变为i,字符K会转变为k。 所以用ctfſhow 123456登录就可以出flag了 w…