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

最新推荐文章于 2024-01-15 15:24:28 发布

原创最新推荐文章于 2024-01-15 15:24:28 发布 · 453 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #javascript #前端

Vue.js 专栏收录该内容

50 篇文章

订阅专栏

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

<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>