ElementUI的动态编辑标签默认只有添加，现在我要有修改的功能

1、要有添加修改的功能

2、要实现去重，不管是添加，还是修改，如果重复的话，都应该进行提示

3、需求还要实现拖拽排序功能，正在实现中。

就是实现有一个按钮，当年点击时，他会变成一个输入框，你可以输入值，失去焦点后，他就又变成一个标签，然后标签后面会有编辑和删除按钮，点击编辑可以修改当前标签的值。

效果

1、初始效果

 2、点击新增时 

 3、点击编辑时

 4、重复时

HTML

 <el-tag :key="tag" type="info" v-for="tag in dynamicTags" closable :disable- 
          transitions="false"  @close="handleClose(tag)" class="distanceTag">
     <span style="margin-right: 4px;">{{ tag }}</span>
     <i class="el-icon-edit" @click="changeValue(tag)"></i>
  </el-tag>

<el-input  v-if="inputVisible" v-model="inputValue" ref="saveTagInput"
          size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
 </el-input>
 <el-button v-else class=" assortAdd" size="small" border-style="['dashed']"
              :border-color="['#1F64E3']" @click="showInput">+新增</el-button>

JS

data(){
  return{
        dynamicTags: ['标签一', '标签二', '标签三'],
        inputVisible: false,
        inputValue: '',
        tempTag: '',
        // 是否是重复数据
        isRepeatedData: false,
        // 是否改变原来的值
        isChange: false,
     
}},
methods:{
 handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },

      showInput() {
        this.tempTag = ''
        this.inputVisible = true;
        this.inputValue = ''
        this.isChange = false

        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      handleInputConfirm() {
        this.isRepeatedData = false
        let inputValue = this.inputValue;
        // 去空格
        inputValue = inputValue.replace(/^\s\s*/, '').replace(/\s\s*$/, '')
        if (inputValue == '') {
          this.inputVisible = false
          return
        }
        // 判断新增的值是否重复
        console.log(this.dynamicTags.indexOf(inputValue),this.tempTag,inputValue);
        const isDuplicate = this.dynamicTags.some((tag) => tag === inputValue);
        if (isDuplicate && this.tempTag !== inputValue) {
          this.isRepeatedData = true
          this.$message.error("不允许添加重复数据！")
          return
        } else {
          this.isRepeatedData = false
        }
        if (this.isChange) {
        const index = this.dynamicTags.indexOf(this.tempTag);
    if (index !== -1) {
      this.dynamicTags.splice(index, 1, inputValue);
    }
    this.inputVisible = false;
    return;
        }
        // 点击添加时，追加
        if (inputValue) {
          this.dynamicTags.push(inputValue);
          console.log(inputValue+'tt:'+this.dynamicTags)
        }
        this.inputVisible = false;
        this.inputValue = '';
      },
      changeValue(tag) {
        console.log(tag,'tag');
        this.inputVisible = true
       
        this.inputValue = tag
        this.tempTag = tag
        this.isChange = true
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

}

样式根据需求自己写吧