openks / learn-vue

自定义组件文档
https://openks.github.io/learn-vue
0 stars 0 forks source link

20180327_`element-ui`单独调用某一个字段的校验功能 #88

Open openks opened 6 years ago

openks commented 6 years ago
 this.$refs[ruleFormName].validateField('checkPass');

直接调用表单需要校验的某个prop即可(问了两个同事都不知道有这个方法),官方示例

openks commented 6 years ago

element-ui表格嵌套校验

// 点击加号生成一个name1+name2 name1和name2需校验非空
name1 +
name2
form1: {
    form2: [{
        name1: '',
        name2: '',
    }],
},
rules: {
    name: [
        { required: true, message: '该项为必填项,请输入内容', trigger: 'blur' },
    ],
},
<el-form :label-position="labelPosition"
        label-width="110px"
        :rules="rules"
        ref="ruleForm"
        :model="form1">
<div v-for="(it,key1) in form1.form2"
        :key="key1">
    <el-form-item label="名称1"
                    :rules="rules.name"
                    :prop="'form2['+key1+'].name1'">
        <el-input v-model="it.name1"></el-input>
    </el-form-item>
    <el-form-item label="名称2"
                    :rules="rules.name"
                    :prop="'form2['+key1+'].name2'">
        <el-input v-model="it.name2"></el-input>
    </el-form-item>
</div>
</el-form>