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

产品品种从字典中获取

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

字典当中的保存

dict_type表

dict_data表

在表单提交的方法中

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

javascript 复制代码
  JSON.stringify(this.form.nature)

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

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

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

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

javascript 复制代码
 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.查看操作结果

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

测试结果:

相关推荐
abigale0319 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者39 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile43 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639971 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊1 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火1 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
脑袋大大的6 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络7 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码