2021-09-09 element el-input自定义验证
2021-09-09 本文已影响0人
jinya2437
image.pngforEach循环input输入项目,限制不能为空
// 数据结构
data() {
return {
collapseActiveKey:['0'],
listCompetitor: [
{
Competitor: undefined,
CompetitorPrice: undefined,
CompetitorAllocation: undefined,
}
] //竞争对手
}
}
// 页面布局
<el-collapse v-model="collapseActiveKey">
<el-collapse-item
v-for="(item, index) in formData.listCompetitor"
:key="index.toString()"
:name="index.toString()">
<template slot="title">
<div class="detailTitle">
<div>
<el-tooltip
v-if="parseInt(index + 1) == formData.listCompetitor.length" content="添加">
<i class="el-icon-circle-plus-outline" @click="addCompetitor(index)" />
</el-tooltip>
<el-tooltip v-if="formData.listCompetitor.length > 1" content="删除">
<i class="el-icon-delete" @click="deleteCompetitor(index)" />
</el-tooltip>
</div>
</div>
</template>
<el-row :gutter="15">
<el-col :span="8">
<el-form-item class="is-required" label="竞争对手" :prop="'Competitor'+index" :rules="[{validator: (a, b, c) =>validateDetailForm(a, b, c, index, 'Competitor'),trigger: 'blur',}]">
<el-input v-model="item.Competitor" placeholder="请输入竞争对手" clearable style="width: 100%;">
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item class="is-required" label="对手价格" :prop="'CompetitorPrice'+index" :rules="[{validator: (a, b, c) =>validateDetailForm(a, b, c, index, 'CompetitorPrice'),trigger: 'blur',}]">
<el-input-number controls-position="right" :min="0.01" :step="0.01" v-model="item.CompetitorPrice" placeholder="请输入对手价格" clearable style="width: 100%;">
</el-input-number>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item class="is-required" label="对手份额" :prop="'CompetitorAllocation'+index" :rules="[{validator: (a, b, c) =>validateDetailForm(a, b, c, index, 'CompetitorAllocation'),trigger: 'blur',}]">
<el-input-number controls-position="right" :min="0.01" :step="0.01" v-model="item.CompetitorAllocation" placeholder="请输入对手份额" clearable style="width: 100%;">
</el-input-number>
</el-form-item>
</el-col>
</el-row>
</el-collapse-item>
</el-collapse>
// 校验函数竞争对手的校验
validateDetailForm(rule, value, callback, index, name) {
if (!this.formData.listCompetitor[index][name]) {
callback(new Error('必填项不能为空!'));
} else {
callback();
}
},