产品采集库开发完毕——记录问题

谁践踏了优雅 2021-09-03 09:29 294阅读 0赞

产品开发库主要是用于运营人员开发产品的模块，可以根据产品链接从电商网站拉取产品信息，然后计算采购价预售价，也可以上架产品以及下架产品，并对产品进行评价。  
可以在首页表格中检索信息并需要的字段，也可以导出产品信息

> 模块主要由表格和form表单以及弹框事件构成，下面主要记录下开发过程中遇到的问题以及需要注意的点，以便回忆和查看。

## 问题： ##

1.  弹框中form表单的数据无法重置为空，当第一次填写弹框的form表单数据保存后，使用重置表单函数，无法清空数据。

> 答：查看了网上的不少资料，这里整合一下。  
> （1）resetFields()只是重置为初始值  
> （2）这个初始值是在form的生命周期函数mounted被调用的时候赋值上去的  
> （3）所以在表单的mounted之前，如果给formData赋值了，那么后面调用resetFields()方法的时候，formData的值都不会变成空字符串。  
> 所以form表单赋值，放在dom渲染之后执行，即在this.$nextTick()函数中赋值，但是以上这种情况只能清空回显的数据，当第一次给表单赋值还是无法清空数据，所以我最后使用了清空表单对象数据的方式。  
> 即在展示弹框的函数里，手动把form表单的值都置为空字符串，在关闭弹框之前，使用form表单的重置函数再重置数据一下，双重保险，这样无论是添加还是编辑数据，关闭弹框后都会置空数据了。

data(){ 
    	return { 
    		ruleForm: { 
               name: [],
                     region: "", //开发原因
                     model: "",
                     color: "",
                     size: "",
                     oldPrice: "",
                     actualPrice: "",
                     weight: "",
                     freight: "",
                     PrePrice: "",
                     salePrice: "",
               },
    	}
    },
    methods:{ 
    	showInfo() { 
                this.dialogCollect = true;
                this.GetClasssfily();  //这是获取表单按钮分类的函数  没必要可注销
                for(let key in this.ruleForm){ 
                      this.ruleForm[key]=""
                }
                console.log("清空数据-----------mounted") 
    
          },
          ClearData() { 
                      //清除页面所有数据   这是清空事件  在保存 或者编辑之后关闭弹框的时候调用
                      //这都是表单中其他的值
                      this.inputLink = this.bigUrl =  "";
                      this.objName = "";
                      this.imgList = this.AttributeArr = [];
                      this.changImgID = this.ClassEnd =""
                      
                      this.$refs.ruleForm.resetFields();  //这里是表单重置函数
    
          }
          
    }

1.  vue 点击左右箭头滚动图片，一次滚动五张，当不能滚动的时候箭头置为灰，不可使用，点击下方小图，在上方大图展示。 此方法自己写了一个，是一次滚动多张图片的，还有一个一次只能滚动一张的，是别人的代码 ，一个可以使用的demo，自己写的方法，记录在下一篇文档中。
2.  正则验证，为什么正则验证必填项，全部清空的时候回出现英文错误提示呢？

> 是因为没有给form绑定prop值，所以当输入框的数据手动删除完的时候，会报英文错误提示。  
> 另外其他单独调用表单正则验证和取消表单验证的地方也需要先绑定prop的值才能使用。所以一定要给表单绑定prop的值。下面记录几个好用的正则验证。

1.  如何全局清空链接或者内容中的空格？

this.consult= this.consult.replace(/\s+/g,"");

1.  \[…new Set(arr)\]的用法是什么？

> ES6基础之——new Set  
> Set 对象作用可以数组去重，数组取并集，交集差集。是很好用的方法。可以参考链接  
> https://www.cnblogs.com/ajaemp/p/11820339.html

//列举数组去重
    var arr = [1,2,3,3,1,4];
    [...new Set(arr)]; // [1, 2, 3, 4]
    Array.from(new Set(arr)); // [1, 2, 3, 4]
    [...new Set('ababbc')].join(''); // "abc" 字符串去重
    new Set('ice doughnut'); //Set(11) { "i", "c", "e", " ", "d", …}

1.  未完待续。。。。

## 注意点： ##

1.  使用饿了么弹框的时候，如果希望弹框组件全屏但是依然保留侧边栏和头部，只需要使用行内样式的margin值即可。

<el-dialog title="产品预售价" :fullscreen="true" :modal="false" @close="showbox" :visible.sync="dialogPreSalePriceVisible" width="100%" style="margin-top:55px; margin-left:130px;"></el-dialog>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doMjAxNDEyMTI_size_16_color_FFFFFF_t_70]

1.  在使用二级弹框的时候，即弹框中的弹框 如果想要去除背景遮罩层，以及不显示一级弹框，既可以在在二级弹框打开的时候关闭一级弹框，完成二级弹框中的业务场景以后，通过子组件给父组件传值的方式this.$emit()，触发事件再次打开一级弹框，可以做到无差别分别显示一级弹框和二级弹框。
2.  在弹框中给form表单赋值的时候，要使用this.$nextTick(()=>\{\}),在vue循环队列结束，准备更新数据的时候给form表单赋值，这样在编辑弹框，回显数据form表单中数据的时候，再次关闭弹框时，可以通过重置即回复表单默认值的方式，清空表单数据。
3.  element-ui的表单验证方式分为失去焦点和内容改变两种方式，如果不写，则默认两种方式都存在，如果填写其一就只生效其中一种方式，需要注意这一点，防止使用错误。

oldPrice: [
         { 
                 required: true,
                 message: "请填写原采购价",
                 trigger: ['blur', 'change'],
           },
           { 
                 validator: NumberRule,
                 trigger: "blur",
           },
     ],

1.  element-ui的正则验证有三种展现方式，一种是写在data里的自定义验证，一种是写在rules中的正则验证，还有一种是要经过后端的正则验证。 可以通过不同的方法取用。

color: [
         { 
                required: true,
                message: "请填写颜色",
                trigger: ['blur', 'change'],
          },
         {  pattern: /^,?(?:[a-zA-Z\s]+,)*(?:[a-zA-Z\s]+)?$/, message: '请输入英文并使用英文逗号间隔' }
    ],

## 正则验证 ##

*  请输入(字母和数字 1-6 位字符)，（这里我是用来验证前缀名的）

//验证this.ModelPrefix 是否符合条件    this.errorInfo是错误提示信息
    if (this.ModelPrefix != "") { 
      let regExp = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{ 1,6}$/;
            if (regExp.test(this.ModelPrefix) === false) { 
                  this.errorInfo = "请输入字母和数字（1-6位字符）";
                  console.log("错误提示", this.errorInfo);
                  return;
            } else { 
                  this.errorInfo = "";
            }
      }

*  为正数且只能保留两位小数，基于element-ui的正则验证方法 （这里我是用来验证价格的）

*  只能保留两位小数 这里这个保留小数的验证非常有用，可以填小数也可以不填 并且不识别（2.）这样的输入内容，如果想要更改保留位数，可直接更改\{\}中的值

*  请输入英文并使用英文逗号间隔，（这里我是用来分割英文颜色的，例如：blue，red,yellow）

let reg = /^,?(?:[a-zA-Z\s]+,)*(?:[a-zA-Z\s]+)?$/

*  验证网络链接 （这里是用来检测店铺链接格式是否正确的）

let num = /(http|https):\/\/([\w.]+\/?)\S*/;
    if (!num.test(Value)) { 
    		  this.consultLink[index].checked  =  true // 验证不通过
    		  this.checkRules = true
      }else{ 
            this.consultLink[index].checked  =  false // 验证通过
            this.checkRules = false
      }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doMjAxNDEyMTI_size_16_color_FFFFFF_t_70]: /images/20210813/1c016c6d7075471585fc6bcd78e2a863.png