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

m0_584624502024-05-01 13:21

产品品种从字典中获取

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

字典当中的保存

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 返回的不是 undefined 或 null，它会继续访问 .label。否则，由于 ?. 后面的表达式不会执行，整个表达式的结果将是 undefined。

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

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();
          }

测试结果：