Vue+ElementUI实现点击加号动态添加

1.需求是点击加号图标往下增加，最多增加5行，最少显示一行（每条前面输入框不能为空及每条的前面输入框的值不能重复）

2.具体实现代码

        

          
          替换为
          

                      
          
          
        


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);
},