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

最新推荐文章于 2024-08-06 16:25:08 发布

qq_42753983

最新推荐文章于 2024-08-06 16:25:08 发布

阅读量838

点赞数 7

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/qq_42753983/article/details/135263621

版权

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