1.需求是点击加号图标往下增加,最多增加5行,最少显示一行(每条前面输入框不能为空及每条的前面输入框的值不能重复)
2.具体实现代码
<cbf-form-item label="位置长度" prop="textReplacement" label-width="80px"
class="PRuleList11">
<div v-for="(item,index) in textReplacementList" :key="index">
<cbf-input placeholder='请输入内容' :maxlength="10" v-model="item.sourceText"
class="width150 mr10" size="small"></cbf-input>
<span>替换为</span>
<cbf-input v-model="item.replacedText" placeholder='请输入内容,可为空'
:maxlength="10" class="width150 ml10 mr10" size="small"></cbf-input>
<i class="iOscar iOscar-tianjia mr10" style="color: #409eff" @click="addDataTxt">
</i>
<i class="iOscar iOscar-shanchu ml10" @click="delDataTxt(index)" v-if="index !=0"
style="color: #ebb563"></i>
</div>
</cbf-form-item>
2-1 data定义
textReplacementList: [
{
sourceText: '',
replacedText: '',
order: ''
}
],
2-2 rules配置
textReplacement: [{ required: true, trigger: "change", validator: this.rulesTxt }]
2-3 方法
rulesTxt(str, value, cllback) {
let tempArray = [];
if (this.formData.ruleType == 7) {
for (let i = 0; i < this.textReplacementList.length; i++) {
if (this.textReplacementList[i].sourceText === "") {
cllback(new Error("替换前文本不得为空"));
return;
}
// // 判断是否重复
if (tempArray.includes(this.textReplacementList[i].sourceText)) {
cllback(new Error("替换前文本不能重复"));
return;
}
tempArray.push(this.textReplacementList[i].sourceText);
}
}
cllback();
},
//添加
addDataTxt() {
if (!this.textReplacementList) {
this.$set(this.textReplacementList, []);
}
if (this.textReplacementList.length == 5) {
return;
}
this.textReplacementList.push({
sourceText: '',
replacedText: '',
order: ''
});
},
//删除
delDataTxt(index) {
this.textReplacementList.splice(index, 1);
},