关于elementUI el-form-item双循环绑定校验规则

该代码片段展示了在Vue.js中使用el-form进行内联布局的表单设计,包括单位选择(el-select)和动态显示的挂牌价输入框(el-input),并实现了数据绑定、表单验证以及条件禁用功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<el-form :inline="true" :model="requestList" label-width="120px" ref="formRef">
            <el-card shadow="always" 
                v-for="(item, index) in requestList.lists"
                :key="index"
                style="margin-bottom: 10px;"
            >
                <el-form-item label="单位" :prop="'lists.' + index + '.unit'" :rules="{
                    required: true,
                    message: '请选择',
                    trigger: 'change',
                }">
                    <el-select v-model="item.unit" placeholder="请选择" clearable filterable>
                        <el-option v-for="it in data.unitLists" :key="it.shelfId" :label="it.labelZh" :value="it.value" />
                    </el-select>
                </el-form-item>

                <!-- 挂牌价 -->
                <div v-for="(its, idx) in item.merchantSkuPriceList">
                    <el-form-item label="挂牌价(元)" :prop="'lists.' + index + '.merchantSkuPriceList.' + idx + '.goodsSkuPrice'" :rules="{
                        required: true,
                        message: '请输入',
                        trigger: 'change',
                    }">
                        <el-input v-model="its.goodsSkuPrice" placeholder="请输入商户名称" :disabled="props.isType == 'edit'" clearable style="width: 214px;" />
                    </el-form-item>
                </div>
                
            </el-card>
        </el-form>
### 动态循环生成的 `el-form-item` 校验实现方式 在 Vue 和 Element-UI 中,动态生成的表单项需要通过绑定 `prop` 属性来指定校验规则。以下是实现动态循环生成的 `el-form-item` 校验功能的具体方法。 #### 1. 绑定 `prop` 属性 `prop` 属性是 `el-form-item` 的关键属性,用于定义表单字段的路径。如果未正确绑定 `prop`,校验规则将无法生效[^5]。对于动态生成的表单项,可以通过字符串拼接的方式动态设置 `prop` 的值。 #### 2. 定义动态校验规则 动态校验规则可以通过遍历数据结构,在初始化时为每个表单项生成对应的规则,并将其绑定到 `rules` 对象中。以下是一个完整的示例: ```vue <template> <el-form :model="ruleForm" :rules="rules" ref="ruleForm"> <el-form-item v-for="(item, index) in dynamicFormList" :key="index" :label="item.rpname + ':'" :prop="'objList.' + item.rpid" > <el-input v-model="ruleForm.objList[item.rpid]" class="formWidthdpls" :placeholder="'请输入' + item.rpname" ></el-input> </el-form-item> </el-form> </template> <script> export default { data() { return { ruleForm: { objList: {}, // 动态表单字段 }, rules: {}, // 动态校验规则 dynamicFormList: [], // 动态表单列表 }; }, created() { this.initDynamicForm(); }, methods: { initDynamicForm() { // 模拟接口返回的数据 const res = { data: [ { rpid: "1", rpname: "姓名", rpisrequired: true }, { rpid: "2", rpname: "年龄", rpisrequired: false }, ], }; this.dynamicFormList = res.data; this.dynamicFormList.forEach((item) => { item.rpid = "name" + item.rpid; // 自定义字段名 let formRule = []; if (item.rpisrequired) { formRule.push({ required: true, message: "请输入" + item.rpname, trigger: "blur", }); } this.rules["objList." + item.rpid] = formRule; // 动态添加规则 this.$set(this.ruleForm.objList, item.rpid, ""); // 初始化表单字段 }); }, }, }; </script> ``` #### 3. 注意事项 - **`prop` 属性的路径**:当表单字段为对象或数组时,`prop` 的值需要使用点号(`.`)或括号(`[]`)表示路径[^4]。 - **动态规则的绑定**:确保在初始化时为每个动态生成的表单项绑定正确的校验规则[^2]。 - **`v-model` 的双向绑定**:动态生成的表单项需要通过 `v-model` 实现双向绑定,确保输入值能够实时更新[^3]。 #### 4. 校验触发 调用 `this.$refs.ruleForm.validate()` 方法可以触发整个表单的校验。如果需要对某个具体的表单项进行校验,可以使用 `this.$refs.ruleForm.validateField(prop)` 方法[^4]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值