首页 > 其他 > 详细

element ui动态表单 + 自定义校验规则

时间:2020-12-07 23:11:23      阅读:97      评论:0      收藏:0      [点我收藏+]

背景描述:

表单如下图所示:

技术分享图片

 

 

 如上图所示,我们有一个动态表单(教育经历) - 可以动态添加的,我们的校验规则是:

如果不填写公司名称,那么所有字段非必填,如果填写了公司名称那么当前item的公司职务等必填

DOM结构:

<el-row>
    <el-form-item
        :rules="workListRule.last_company_name"
        :prop="‘dc_talent_work_list.‘ + idx + ‘.last_company_name‘">
        <template slot="label">
            <span>公司名称</span>
            <div style="color:#ccc;line-height:20px;font-size:12px;margin-bottom:8px;padding-left:10px;">
                <div>1、如有工作经历,请如实填写</div>
                <div>2、并需完整填写每个字段信息(公司名称+部门+职务+开始时间+结束时间),否则会造成信息无法录入的情况。</div>
                <div>3、公司名称需填写公司中文或英文全称</div>
            </div>
        </template>
        <el-input v-model="item.last_company_name" placeholder="请输入"></el-input>
    </el-form-item>
</el-row>
<el-row>
    <el-form-item label="所在部门"
        :rules="workListRule.last_company_unit"
        :prop="‘dc_talent_work_list.‘ + idx + ‘.last_company_unit‘"
    >
        <el-input v-model="item.last_company_unit" placeholder="请输入"></el-input>
    </el-form-item>
</el-row>

JavaScript:

var validateLastCompanyName = (rule, value, callback) => {
    callback();
};
var validateLastCompanyUnit = (rule, value, callback) => {
    // "dc_talent_work_list.0.last_company_unit"
    let thisField = rule.field.split(".")[1];
    if(this.form.dc_talent_work_list[thisField].last_company_name != ‘‘ && value==""){
        callback(new Error("公司部门不能为空"));
    }
    callback();
};
// 工作经历校验规则
workListRule:{
    last_company_name: { validator: validateLastCompanyName,trigger: "blur"},
    last_company_unit: { validator: validateLastCompanyUnit,trigger: "blur"},
}

主要依据:

prop属性根据当前数组下标 idx 动态,

判定当前在第几个工作经历的idx通过形参 rule 字符串截取获取 (自己找到的,文档没有)

 

element ui动态表单 + 自定义校验规则

原文:https://www.cnblogs.com/xuweiqiang/p/14099930.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!