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

news2025/1/8 4:56:38

产品品种从字典中获取

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

字典当中的保存

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.coloradmin.cn/o/1636254.html

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

相关文章

汽车制造业安全事故频发,如何才能安全进行设计图纸文件外发?

汽车制造业产业链长,关联度高,汽车制造上游行业主要为钢铁、化工等行业,下游主要为个人消 费、基建、客运和军事等。在汽车制造的整个生命周期中,企业与上下游供应商、合作商之间有频繁、密切的数据交换,企业需要将设计…

大模型公开课-大模型的语言解码游戏学习总结

在当今快速发展的人工智能领域,深度学习作为其中的一项关键技术,正引领着科技的新潮流。而对于初学者来说,了解大型语言模型的解码游戏,对于理解深度学习的基本概念至关重要。本篇博客将对一次关于大型语言模型解码游戏的视频教学…

面试经典算法题之双指针专题

力扣经典面试题之双指针 ( 每天更新, 每天一题 ) 文章目录 力扣经典面试题之双指针 ( 每天更新, 每天一题 )验证回文串收获 392. 判断子序列 验证回文串 思路 一: 筛选 双指针验证 class Solution { public:bool isPalindrome(string s) {// 所有大写字母 > 小写 去除非字母…

nginx下载安装配置(含ssl)

下载安装环节 wget https://nginx.org/download/nginx-1.24.0.tar.gz tar -zxvf xxx.tar.gz yum -y install pcre-devel openssl openssl-devel ./configure --prefix/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-stream make & make i…

Linux的vim下制作进度条

目录 前言: 回车和换行有区别吗? 回车和换行的区别展示(这个我在Linux下演示) 为什么会消失呢? 回车和换行的区别 为什么\r和\n产生的效果不同? 打印进度条: (1)打印字符串 …

第十四届蓝桥杯国赛:2023次方的思考(指数塔,数论)

首先我们要知道,正常计算的话,指数优先级最高,因此得先计算指数,比如: 2 3 2 512 2^{3^2}512 232512 欧拉定理的关键在于,它允许我们通过减少计算的指数大小来简化模运算。 经过仔细研究(看题…

设计模式之代理模式ProxyPattern(六)

一、代理模式介绍 1、什么是代理模式? 代理模式是一种结构型设计模式,它允许为其他对象提供一个替代品或占位符,以控制对这个对象的访问。 2、代理模式的角色构成 抽象主题(Subject):定义了真实主题和代…

【算法】【单调栈】【leetcode】1019. 链表中的下一个更大节点

刷这题之前先看: 【算法】【OD算法】【单调栈】找朋友-CSDN博客 【算法】【单调栈】【leetcode】1475. 商品折扣后的最终价格-CSDN博客 【算法】【单调栈】【leetcode】901. 股票价格跨度-CSDN博客 【算法】【单调栈】每日温度-CSDN博客 题目地址&#xff1…

机器人系统ros2-开发实践04-ROS2 中 tf2的定义及示例说明

1. what ros2 tf2 ? tf2的全称是transform2,在ROS(Robot Operating System)中,它是专门用于处理和变换不同坐标系间位置和方向的库。这个名字来源于“transform”这个词,表示坐标变换,而“2”则…

【介绍下Unity编辑器扩展】

🌈个人主页: 程序员不想敲代码啊 🏆CSDN优质创作者,CSDN实力新星,CSDN博客专家 👍点赞⭐评论⭐收藏 🤝希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共…

学习 Rust 第 23 天:闭包

Rust 闭包提供了简洁、富有表现力的匿名函数来捕获周围的变量。它们简化了代码,提供了存储、参数传递和函数重构方面的灵活性。它们与泛型的交互增强了灵活性,而捕获模式则促进了有效的所有权和可变性管理。从本质上讲,闭包是 Rust 的基础&am…

笔记-用Python脚本启停JAR程序

用Python脚本启停JAR程序,需要用到python中的以下内置模块 subprocess 是 Python 的一个标准库模块,用于在新进程中执行子命令,获取子进程的输入/输出/错误以及返回码等os 是 Python 的一个标准库模块,它提供了与操作系统交互的功…

【web安全】-- 命令执行漏洞详解

本文将从原理开始介绍命令执行漏洞并附有三个实例来供各位客官学习 文章目录 一、什么是命令执行漏洞二、出现的原因三、有可能存在命令执行漏洞的函数(php)1、利用一些函数来实现命令执行2、直接执行系统命令的函数 四、命令拼接符号1、Windows2、linux…

【Mac】mac 安装 prometheus 报错 prometheus: prometheus: cannot execute binary file

1、官网下载 Download | Prometheus 这里下载的是prometheus-2.51.2.linux-amd64.tar.gz 2、现象 解压之后启动Prometheus 启动脚本: nohup ./prometheus --config.fileprometheus.yml > prometheus.out 2>&1 & prometheus.out日志文件&#xff…

opencv基础篇 ——(十)非真实感渲染

非真实感渲染(Non-Photorealistic Rendering, NPR)是指通过一系列图像处理技术,将真实感图像转换为具有特定艺术风格或视觉效果的图像,模拟绘画、素描、卡通等非现实主义表现手法。OpenCV 提供了一些内置函数来实现非真实感渲染&a…

医疗大模型华佗GPT-2:医学问答超越GPT-4,通过2023年国家执业药师考试

前言 随着人工智能技术的快速发展,特别是在自然语言处理(NLP)领域,大型预训练模型如GPT系列已经显示出在多个领域的强大应用潜力。最近,华佗GPT-2医疗大模型的发布,不仅标志着人工智能在医学领域的一大进步,更是在202…

Linux IP Forwarding路由转发实验

linux 路由转发功能 Linux 操作系统具备路由转发功能,路由功能是指 Linux 操作系统提供的路由管理和转发功能,它允许 Linux 主机在网络中正确地转发数据包,并确保数据包能够达到其目的地。 出于安全考虑,Linux系统默认是禁止数据…

vscode 检查更新 没有检查更新按钮

vscode 检查更新 没有检查更新按钮 1、问题描述2、问题分析3、解决方法 1、问题描述 今天在使用vscode写markdown文档时,需要粘贴图片到markdown文档中,结果无法粘贴进来,显示如下:只粘贴了image.png这几个字。 2、问题分析 搜索…

交通运输智慧监管平台---强化物流安全与效率的新举措

一、建设背景 随着社会对于交通安全和环境保护的要求不断提高,对卡车运输的监管和合规性要求也逐渐加强。为了满足快速发展的物流需求,提高供应链协同和可追溯性、解决安全问题、提高运输效率和降低成本,我们利用现代技术和信息化手段着力建设…

QT - 创建Qt Widgets Application项目

在Qt中结合OpenGL使用,可以创建一个Qt Widgets应用程序项目。在创建项目时,您可以选择使用OpenGL模板来生成一个已经集成了OpenGL的项目。这个模板会自动帮助您集成OpenGL和Qt,并生成一个基本的OpenGL窗口。您可以在这个窗口中进行OpenGL的开…