vue:遇到的坑之-----form属性(element-ui)

1.解决输入框输入内容后回车就会刷新页面bug

加一个@submit.native.prevent就可以已解决

原理:当一个 form 元素中只有一个输入框时,在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为,可以在 标签上添加 @submit.native.prevent。

 

场景:表单双击编辑时遇到的

 

2.表单动态校验

data(){
    const validAge = (rule,value,callback) =>{
        if (!value) {
            callback(new Error('年龄不能为空'));
        } else if(value < '18' ){
            callback(new Error('年龄不能小于18!'));
        } else {
            callback();
        }
    }
    return {
        formRules:{
            age:[{require:true,trigger:'blur',validator:validAge}]
        }
    }
}

3.表单输入内容限制

只允许输入数字

① 使用正则


    
        
    

②vue自带的校验 (不过这个类型是为num类型而不是string!!

 所以这里会有两个坑:

第一个:当数据回显时,数据有可能变成string类型,所以回显的时候这个参数值记得转成num类型,不然rule会一直提示请输入正确格式!如果回显数据格式没变化的话就可以不用管了


    
        
    

data() {
    return {
        rule:{
            data:[{ required: true, message: '请输入内容' }, 
                  { type: 'number', message: '请输入正确格式' }]
        }
    }
},
methods:{
    // 回显
    updateData() {
        this.form.data = Number(this.form.data) ;
    }

}

第二个坑:当数据输入到24位以后 (虽然不可能会有这么多位,但是万一呢0.0),会自动显示成infinity(无穷大)

所以最好做一个长度限制 :maxlength="10"

4.解决el-input和el-select宽度不一致

加了一个透明的图标


    


5.下拉回显显示id而不是label的原因可能是类型不一样,id为数字,而匹配的是字符串

这个问题也是数据格式的原因 例子我就没附了

6.表单校验的触发类型可以为多个或者不写

有时候用到了el-input 和 el-select中的特殊的模板:

vue:遇到的坑之-----form属性(element-ui)_第1张图片

vue:遇到的坑之-----form属性(element-ui)_第2张图片

这个时候校验的触发时机就会有问题,有时候输入完值后校验还在 或者 刚打开对话框就触发了校验 (这里用上了:validate-on-rule-change="false" 属性)

解决办法:可以改下trigger的值

rule: {
        data1: [{ required: true, message: '请输入内容', trigger: 'change,blur' }],
        data2: [{ required: true, message: '请输入内容']
      }

 

7.表单的标签插槽,当要对标签做样式修改时,可以利用插槽


    
    

 

遇到新的以后再补充!

你可能感兴趣的:(填坑)