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>