盘点Element踩过的那些坑

1. Form表单

1.1 resetField方法不起作用

描述

Form表单下的resetField方法调用后发现不起作用
代码片段如下

      <el-form ref="myForm" :model="form" label-width="80px">
          <el-form-item label="活动名称" >
                <el-input v-model="form.name"></el-input>
            </el-form-item>
      </el-form>
      <el-button @click="reset">重置</el-button>
      <el-button @click="submit">提交</el-button>

js片段

reset(){
    this.$refs["myForm"].resetFields()
},

问题原因

因为el-form-item除没有添加prop属性，导致无法重置

问题解决

<el-form-item label="活动名称"  prop="name" >

增加prop属性即可

1.2 校验属性层级比较深,无法触发规则校验

问题描述

我们知道绑定表单校验需要首先给el-form-item标签绑定prop属性，如果这个prop属性的层级比较深怎么办呢？请看下面的错误代码

        <el-form ref="myForm" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="活动名称" prop="cock">
                <el-input v-model="form.name.cock"></el-input>
            </el-form-item>
        </el-form>

结果是绑定值与校验无法关联上。
此时由于el-input绑定的是form.name.cock，层级比较深，那么我们如何定义prop的属性呢？

问题解决

vue部分

<el-form ref="myForm" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="活动名称" prop="name.cock">
                <el-input v-model="form.name.cock"></el-input>
            </el-form-item>
        </el-form>

js部分

              rules: {
                    name:{
                        cock: [
                            { required: true, message: '请输入活动名称', trigger: 'blur' },
                        ],
                    }
                }

由此可知，后面如论绑定的属性层级有多深，我们都可以接着写下去，成功实现绑定值与规则联动，达到我们的目的。