最近在做的页面中有个需求,
添加规格这种模块化的表单内容
单独封装组件又复杂化了
然后昨天看到了一个表单数组循环出来固定的几条内容
受其启发,想到用v-for处理
代码如下(本身为了界面美观,进行了一个v-for分成两列,这里主要讲解思路,大概简化了,不保证放出代码可直接运行本身也放的不全
)
v-for分列思路
子表单(用el-card包裹,可以按需去掉,主要是思路)
<el-card
v-for="(item, index) in form.ruleList"
shadow="never"
:body-style="{ padding: '10px 15px' }"
>
<div slot="header" class="clearfix">
<span>规格{{ index+1 }}</span>
<el-button
style="float: right"
type="text"
:disabled="form.ruleList.length<2"
@click="removeRules(index)"
>移除规格</el-button>
</div>
<el-form
ref="ruleList"
:model="item"
:rules="goodRulesvalid"
label-width="80px"
>
<el-form-item
label="规格名称"
prop="ruleName"
>
<el-input v-model="item.ruleName" />
</el-form-item>
<el-form-item label="总库存" prop="goodsAllNumber">
<el-input-number
v-model="item.goodsAllNumber"
controls-position="right"
:min="0"
/>
</el-form-item>
<el-form-item label="剩余库存" prop="goodsNumber">
<el-input-number
v-model="item.goodsNumber"
controls-position="right"
:min="0"
/>
</el-form-item>
<el-form-item label="原价" prop="goodsOriginal">
<el-input-number
v-model="item.goodsOriginal"
controls-position="right"
:min="0"
/>
</el-form-item>
<el-form-item label="现价" prop="goodsNumber">
<el-input-number
v-model="item.goodsPrice"
controls-position="right"
:min="0"
/>
</el-form-item>
</el-form>
</el-card>
父表单存在添加按钮,直接在数组中添加空对象
卡片组件(子表单)中移除按钮,数组方法splice
剪切当前下标,且不影响数组顺序
// 添加商品规则
addRules() {
this.form.ruleList.push({
ruleName: null,
goodsAllNumber: null,
goodsNumber: null,
goodsOriginal: null,
goodsPrice: null,
ruleId: null
});
},
// 移除商品规则
removeRules(index) {
this.form.ruleList.splice(index, 1);
},
子表单,v-for循环后,ref(这里的ruleList只是起名占位)会是一个数组
验证规则rules绑定的是另写的对数组里对象的验证
model为下图ruleList的每一项,因为v-for,直接绑定item了
然后在验证前[CRUD.HOOK.beforeValidateCU]
的钩子中再进行验证,即保证了父级表单和子级表单是同步验证的
[CRUD.HOOK.beforeValidateCU](crud, form) {
console.log(this.$refs);
for (var i = 0; i < this.$refs.ruleList.length; i++) {
console.log(this.$refs.ruleList[i]);
this.$refs.ruleList[i].validate(valid => {
if (!valid) {
return false;
}
});
}
},