element-ui中的动态编辑标签 的 前端代码实现

element-ui中的动态编辑标签实现可以借助el-tag组件和el-input组件，具体实现步骤如下：

1.使用el-tag组件展示标签，并在标签上绑定点击事件，点击标签时触发编辑模式。

2.在编辑模式下，使用el-input组件替换原标签，编辑完成后再将el-input组件替换回el-tag组件。

3.在el-input组件上绑定blur事件，在失去焦点时触发编辑完成事件，并将编辑的内容传递给父组件进行保存。

以下是示例代码：

<template>
  <el-tag v-if="!isEdit" @click="handleEdit">{{ value }}</el-tag>
  <el-input v-else v-model="editValue" @blur="handleEditComplete"></el-input>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      isEdit: false,
      editValue: this.value
    }
  },
  methods: {
    handleEdit() {
      this.isEdit = true;
      this.$nextTick(() => {
        this.$refs.input.focus();
      })
    },
    handleEditComplete() {
      if (this.editValue !== this.value) {
        this.$emit('update:value', this.editValue);
      }
      this.isEdit = false;
    }
  }
}
</script>

在父组件中使用该组件时，只需将需要编辑的标签内容通过value属性传递给该组件，并监听update:value事件获取编辑完成后的内容即可。

<template>
  <dynamic-tag :value="tag" @update:value="handleTagUpdate" />
</template>

<script>
import DynamicTag from '@/components/DynamicTag.vue'

export default {
  components: {
    DynamicTag
  },
  data() {
    return {
      tag: '标签名'
    }
  },
  methods: {
    handleTagUpdate(value) {
      this.tag = value;
    }
  }
}
</script>