美文网首页
1.element tag动态添加,编辑的时候回显

1.element tag动态添加,编辑的时候回显

作者: 流泪手心_521 | 来源:发表于2020-09-24 11:23 被阅读0次

1.添加的结构

<el-form-item label="设置关键字" >
            <el-tag
                    :key="tag+index"
                    v-for="(tag,index) in dynamicTags"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)">
              {{tag}}
            </el-tag>
            <el-input
                    class="input-new-tag"
                    v-if="inputVisible"
                    v-model="inputValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm"
            >
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+关键词</el-button>
          </el-form-item>

2.data里面定义的数据,

//设置关键词
 dynamicTags: [],
 inputVisible: false,
 inputValue: '',

3.methods里面的方法

//设置关键字
          //删除
          handleClose(tag) {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
          },

          showInput() {
            this.inputVisible = true;
            this.$nextTick(() => {
              this.$refs.saveTagInput.$refs.input.focus();
            });
          },
          //添加关键词
          handleInputConfirm() {
            let inputValue = this.inputValue;
            console.log(inputValue);
            if (inputValue) {
              if(this.dynamicTags.length<5){
                this.dynamicTags.push(inputValue);
              }else{
                this.$message.error('关键字最多可设置5个!')
              }
            }
            this.inputVisible = false;
            this.inputValue = '';
          },

4.编辑回显的时候,只需要把后台返回的数据添加到this.dynamicTags数据中就可以回显了

//设置关键字赋值
                  if(this.ruleForm.announceContentKey.contentKey1){
                    this.dynamicTags.push(res.data.contentKey1)
                  }
                  if(this.ruleForm.announceContentKey.contentKey2){
                    this.dynamicTags.push(res.data.contentKey2)
                  }
                  if(this.ruleForm.announceContentKey.contentKey3){
                    this.dynamicTags.push(res.data.contentKey3)
                  }
                  if(this.ruleForm.announceContentKey.contentKey4){
                    this.dynamicTags.push(res.data.contentKey4)
                  }
                  if(this.ruleForm.announceContentKey.contentKey4){
                    this.dynamicTags.push(res.data.contentKey5)
                  }

相关文章

网友评论

      本文标题:1.element tag动态添加,编辑的时候回显

      本文链接:https://www.haomeiwen.com/subject/glezyktx.html