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.mfbz.cn/a/584845.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【酱浦菌-模拟仿真】python模拟仿真PN结伏安特性

PN结的伏安特性 PN结的伏安特性描述了PN结在外部电压作用下的电流-电压行为。这种特性通常包括正向偏置和反向偏置两种情况。 正向偏置 当外部电压的正极接到PN结的P型材料,负极接到N型材料时,称为正向偏置。在这种情况下,外加的正向电压会…

Anaconda的环境快速迁移(目前windows,未来更新linux)

摘要: 日常办公经常需要在新机器上部署运行环境并进行代码调试,尤其是在AI迅速发展的今天,python已经成为了强有力的AI领域编程语言之一。为了方便对不同windows下python代码工程进行快速部署。本文主要从工具环境的安装、原环境的快速打包、…

消灭AI“耗电巨兽”?暴雨服务器推出液冷节能降耗算力方案

在科技飞速发展的今天,人工智能已成为驱动未来的重要力量。随着AI及大模型技术的进一步普及和应用场景的拓宽,相关算力需求呈指数级增长,大规模的AI训练和推理过程均需消耗大量电力,如同一个巨大的电力黑洞,吞噬着海量…

【云原生】Docker 实践(一):在 Docker 中部署第一个应用

Docker 实践(一):在 Docker 中部署第一个应用 1.使用 YUM 方式安装 Docker2.验证 Docker 环境3.在 Docker 中部署第一个应用3.1 小插曲:docker pull 报 missing signature key 错误3.2 重新安装 Nginx 1.使用 YUM 方式安装 Docker…

QT学习之QtXlsx

背景: 本来我是想提取xml中的信息存在xlsx文件中的,网上很多说是使用QtXlsx; 于是我找了一些帖, 像:https://www.cnblogs.com/liming19680104/p/14398459.html; 大家的说法都是安装第三方库到QT中&#xff…

Linux内存相关名词介绍

在日常的问题排查过程中,Linux内存相关的问题也非常多,OOM、内存泄漏 都是比较头疼的而且非常常见一些问题。如下图,我们都知道Linux 内存将内存做了以下划分(如: Node、Zone、Page),这里我们先简单看一些内存相关的名词解释。 …

「中标喜报」合众致达中标深圳安居乐寓智能水电表供货及安装项目

2024年4月25日,深圳合众致达科技有限公司(以下简称“我司”)成功中标安居乐寓2023盐田区保障性租赁住房改造提升项目的水电表供货与安装工程(二次)项目,此次中标标志着我司在城中村公寓出租房能源计费领域的专业实力及市场竞争力得到了进一步的认可。 我…

手搓数组栈(C语言)

stack.h #pragma once#include <stdio.h> #include <stdlib.h> #include <assert.h> #include <stdbool.h> // 支持动态增长的栈 typedef int STDataType; typedef struct Stack {STDataType* a;int top; // 栈顶int capacity; // 容量 }Stack; //…

我们自己的芯片指令集架构——龙芯架构简介

CPU指令集架构&#xff08;ISA, Instruction Set Architecture&#xff09; CPU指令集架构是处理器硬件与软件之间的接口规范&#xff0c;它定义了一组基本指令&#xff0c;以及这些指令的操作格式、编码方式、寻址模式、寄存器组织、中断机制、异常处理等各个方面。ISA是计算…

MySQL中的并发控制,读写锁,和锁的粒度

MySQL中的并发控制&#xff0c;读写锁&#xff0c;和锁的粒度 并发控制的概述 在数据库系统中&#xff0c;并发控制是一种用于确保当多个用户同时访问数据库时&#xff0c;系统能够提供数据的一致性和隔离性的机制。MySQL支持多种并发控制技术&#xff0c;其中包括锁机制、多…

Unity镂空图像做法

问题和解决方案 现在要完成一个需求&#xff0c;即镂空中间部分的image&#xff0c;外围image可以定义颜色并可选屏蔽点击&#xff0c;而中间的image需要透明且可以穿透&#xff0c;必须不能屏蔽点击。 由此拆分成了两个问题&#xff1a; 1.定义外围image颜色&#xff0c;内…

力扣数据库题库学习(4.25日)

1484. 按日期分组销售产品 问题链接 思路与分析 编写解决方案找出每个日期、销售的不同产品的数量及其名称。 每个日期的销售产品名称应按词典序排列。 返回按 sell_date 排序的结果表。我来分析一下&#xff0c;这里的题目要求其实就是统计不同日期下的销售产品数&#xf…

什么是域名解析?域名解析的完整流程是什么?如何清理DNS缓存?(附源码)

目录 1、什么是域名&#xff1f; 2、为什么使用域名&#xff1f; 3、域名解析的完整流程 4、调用gethostbyname系统接口将域名解析成IP地址 5、为什么需要清理系统DNS缓存&#xff1f; 6、使用cmd命令清理DNS缓存 7、通过代码去清除系统DNS缓存 C软件异常排查从入门到精…

Ubuntu 24.04 LTS (Noble Numbat) 正式版发布

Ubuntu 24.04 LTS (Noble Numbat) 正式版发布 Canonical 的第 10 个长期支持版本在性能工程、企业安全和开发人员体验方面树立了新标准 请访问原文链接&#xff1a;Ubuntu 24.04 LTS (Noble Numbat) 正式版发布&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。…

Pytest切换测试环境:使用hooks函数、pytest-base-url插件

Pytest切换测试环境&#xff1a;使用hooks函数、pytest-base-url插件 1.使用hooks函数2.使用pytest-base-url插件安装pytest-base-url使用 1.使用hooks函数 # conftest.py#Initialization hooks 初始化钩子: 添加自定义命令行选项 def pytest_addoption(parser):parser.addopt…

一、OSPF基础

目录 1.路由协议的优先级 2.转发原则&#xff1a;最长匹配原则 3.负载分担 4.路由备份&#xff08;浮动路由&#xff09; 5.路由协议的分类 6.动态路由 7.距离矢量路由协议&#xff08;BGP&#xff0c;RIP&#xff09; 8.链路状态路由协议&#xff08;OSPF&#xff0c;I…

Vue3框架

Vue3框架 一.使用create-vue搭建Vue3项目二.组合式API - setup选项1.setup选项的写法和执行时机2.setup中写代码的特点3. script setup 语法糖 三.组合式API - reactive和ref函数1. reactive2. ref3. reactive 对比 ref 四.组合式API - computed五.组合式API - watch1. 侦听单个…

Flutter 有什么优异特性和革命性创新之处?

Flutter 有什么优异特性和革命性创新之处? 什么是 Flutter&#xff1f; Flutter mobile app SDK是一种新的方式来构建漂亮的原生移动应用程序&#xff0c;摆脱过去常见的“千篇一律”的应用程序。用过Flutter的人都对它赞赏有加&#xff1b; 相比较其他新型系统&#xff0c…

制作场景资源的Prefab

制作骨骼模型的Prefab 现在游戏内的使用骨骼模型是通过老版的Animator去实现控制的&#xff0c;所以需要将模型切换为Animator 第一步&#xff0c;动画类型设置为Generic&#xff0c;创建Avatar 模型里面会有对应的Avatar文件 我们还需要一个Controller文件&#xff0c;用于…

VMware虚拟机下载安装教程【超详细】

推荐大佬文章&#xff1a;VMware下载安装教程(超详细)-CSDN博客 目录 一、VMware下载 二、VMware安装 一、VMware下载 1、进入VMware官网 2、点击“Products”&#xff0c;向下滑动 --> 选择“Workstation Pro” 3、向下滑动&#xff0c;找到并选择“Download VMware Wo…
最新文章