Vue - el-form的学习记录 - 记录问题解决方法

约定不等于承诺〃 2024-03-23 09:54 100阅读 0赞

## 问题1： ##

`Elementui在重置表单时，无法使用this.$refs[‘formRefVal‘].resetFields()清空表单数据；`

--------------------

必须为每一个 `el-form-item` 配置一个指定的 `prop` 参数，`this.$refs[‘formRefVal‘].resetFields()` 它会跟进初始值，还原原来的值。

> 根据文档显示，resetFields是对整个表单进行重置，将所有字段值重置为空并移除校验结果。但是实际上resetFields是清空validateMessage，然后把值重置成了上一次初始化的值。

form的每个item加prop属性，需要和绑定数据的最后名称一致  
（即与 v-model 指定的值要和 prop 的参数值要一致）

## 参考链接 ##

[1. Elementui在重置表单时，无法使用this.$refs\[‘formRefVal‘\].resetFields()清空表单数据；][1. Elementui_this._refs_formRefVal_.resetFields]

在配置上面的 `this.$refs[‘formRefVal‘].resetFields()` 会报如下错误，笔者觉得可能是组件的加载顺序问题。

`[Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'resetFields')"`

--------------------

## 问题2： ##

`如何自定义表单内组件的长度`

--------------------

![在这里插入图片描述][864884552e2c4bfbbf3a5bf5be0fb314.png]

<el-form-item prop="name" label="名称">
    <el-input v-model="testform.name" autocomplete="off" style="width:80%;"></el-input>
    </el-form-item>
    <el-form-item prop="age" label="年龄">
    <el-input v-model="testform.age" autocomplete="off" style="width:100%;"></el-input>
    </el-form-item>

## 参考链接 ##

[1. el-form设置el-select和el-input一样的宽度][1. el-form_el-select_el-input]

--------------------

## 问题3： ##

`表单字段内数据检验规则的配置方法`

--------------------

## 参考链接 ##

[1. el-form的入门学习 该文章内有关于表单字段内数据检验规则的配置方法][1. el-form_]  
[2. el-form resetFields无效和validate无效的可能原因及解决方法][2. el-form resetFields_validate]

--------------------

## 问题4： ##

`如何阻止表单自顾自的提交，必填的字段没填也能提交的 bug`

`xxx.vue` 演示模板

<el-form :model="form" :rules='formRule' ref='form'>
    <el-form-item prop="name" label="姓名">
    <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submit('form')">确 定</el-button>
    <el-button @click="cancel">取 消</el-button>
    </div>
    
    
    export default {
        
      name: "test",
      data() {
        
        return {
        
          // 表单字段
          formData: {
        
            name: '',
          },
          // 表单检验规则
          formRule: {
        
            name: [{
         required: true, message: '请输入名称', triggle: 'blur' }],
          },
    method:{
        
    submit(formName){
        
          this.$refs[formName].validate(valid => {
        
          if (valid) {
        
              console.log("success submit!!");   
              }   
          else{
        
              console.log("error submit!!");
            }
            });
    	}
       }
      }
     }
    }

注意是 `ref` 属性的参数值，才能对该表单的检验规则进行一个操作，记得回传一个 `ref` 参数值。

--------------------

## 问题5： ##

`自定义表单 form 验证器 validator 无效问题`

解决方法：必须定义一个 `const` 变量的`validator`，而不是在 `export default { }` 内部定义 validator 方法，像是调用 `validator: this.validator` 是无法生效的 验证器，笔者尝试过。

具体的无效验证器例子：

export default {
        
    	data() {
        
    		return {
        
    			formModel: {
        
    				name: ''
    			},
    rules: {
        
    	name: [
    		{
         validator: this.checkName, trigger: "blur",required: true }
    			]
    	}
    	·
    	·
    	·
    method: {
        
    checkName:{
        
        // 自定义验证器   但却是无效的
    }
    }

无效验证器 IDEA 开发工具内的显示如下：（`validator` 是紫色的，无效验证器）

![在这里插入图片描述][eb3b949ba8734a7597b288f55c728b3d.png]

而有效的验证器 IDEA 开发工具内的显示会是这样的：（`validator` 是橙色的，有效验证器）

![在这里插入图片描述][b01b1b911f5a44e2b8b7dbb6f780b6a3.png]

`xxx.vue` 正确有效验证器演示模板：

<template>
    <el-form
    		:model="formModel"
    		:rules="rules"
    		ref="ruleForm"
    	>
    		<el-form-item label="姓名" prop="name">
    	        <el-input
    	          v-model="formModel.name"
    	          placeholder="请输入姓名"
    	          clearable>
    	        </el-input>
    	    </el-form-item>
    	</el-form>
    </template>
    <script>
    
    const checkName = (rule, value, callback) =>{
        
    
      if (!value) {
        
        callback(new Error('xxx不能为空'))
      }
      if (!checkfield(value)) {
        
        callback(new Error('已保存过该数据！'))
      }
      callback()
    };
    
    export default {
        
    	data() {
        
    		return {
        
    			formModel: {
        
    				name: ''
    			},
    			rules: {
        
    				name: [
    					{
         validator: checkName, trigger: "blur",required: true }
    				]
    			}
    		}
    	},
      methods: {
        
      submit() {
        
    		this.$refs.ruleForm.validate((valid, errObj)=>{
        
    		    valid && console.log('表单校验通过')
    		})
    	  },
      }
    }
    </script>

## 参考链接 ##

[1. el-form自定义规则rules——validate的使用 & 小红心不出现解决方案][1. el-form_rules_validate_ _]

[2. vue表单rules校验][2. vue_rules]

[3. 在vue中使用rules对表单字段进行验证][3. _vue_rules]

--------------------

[1. Elementui_this._refs_formRefVal_.resetFields]: https://blog.csdn.net/weixin_43846574/article/details/120104461
[864884552e2c4bfbbf3a5bf5be0fb314.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/6e1cf0e0394c48478c0131b052b9072c.png
[1. el-form_el-select_el-input]: https://blog.csdn.net/q283614346/article/details/126855652
[1. el-form_]: https://blog.csdn.net/qq_40765784/article/details/125167724
[2. el-form resetFields_validate]: https://www.jb51.net/article/259117.htm
[eb3b949ba8734a7597b288f55c728b3d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/e668e137b9ad446ba0e93bf73723bc3c.png
[b01b1b911f5a44e2b8b7dbb6f780b6a3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/36e35774595246eeb51b323063ac5fa1.png
[1. el-form_rules_validate_ _]: https://blog.csdn.net/weixin_44867717/article/details/125591627
[2. vue_rules]: https://blog.csdn.net/weixin_45928161/article/details/123601129?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-4-123601129-blog-102670833.235%5Ev28%5Epc_relevant_recovery_v2&spm=1001.2101.3001.4242.3&utm_relevant_index=7
[3. _vue_rules]: https://blog.csdn.net/qq_41402200/article/details/86016313