elementUI中动态编辑Tag 标签点击事件编辑替换原来的值

简述

需求：
1.可新增标签
2.删除标签
3.可编辑修改标签
4.不允许重复
前提：
1.已搭建好vue项目
2.已下载好elementUI依赖
（如初学者请参考我的其他文章，随手点个赞谢谢！）

实现效果如下

源码

此代码根据官方文档进行改进 你也可根据自己需求进行修改

<template>
  <div>

    <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @click="changeValue(tag)"
      @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">+ New Tag</el-button>


  </div>
</template>

<script>
  export default {
    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(inputValue+'uuu:'+this.tempTag)
        // 判断新增的值是否重复
        if (this.dynamicTags.indexOf(inputValue) != -1 && this.tempTag === inputValue) {
          this.isRepeatedData = true
          this.$message.warning("不允许添加重复数据！")
          return
        } else {
          this.isRepeatedData = false
          // this.isChange = false
        }
        // 判断是否修改原有值，是 替换修改好的值，否新增
        if (this.isChange) {
          this.dynamicTags[this.dynamicTags.indexOf(this.tempTag)] = this.inputValue
          this.inputVisible = false
          return
        }
        // 点击添加时，追加
        if (inputValue) {
          this.dynamicTags.push(inputValue);
          console.log(inputValue+'tt:'+this.dynamicTags)
        }
        this.inputVisible = false;
        this.inputValue = '';
      },
      changeValue(tag) {
        this.inputVisible = true
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
        this.inputValue = tag
        this.tempTag = tag
        this.isChange = true
      }
    }
  }
</script>

<style scoped>
  .el-tag+.el-tag {
    margin-left: 10px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>