vue+ElementUI实现Tag的增删改等功能

        项目需求：存效果图上看，需要对按钮进行添加、编辑和删除，查阅ElementUI库里有Tag组件，但是对于需求还是缺编辑的功能，具体的代码及页面效果如下：

<template>
  <div style="display: flex; flex-wrap: wrap">
    <div
      :key="index"
      style="margin-right: 10px; margin-bottom: 10px"
      v-for="(tag, index) in row.groupItemVo"
    >
      <div v-if="sign === 1">
        <el-input
          size="small"
          maxlength="6"
          show-word-limit
          style="width: 100px"
          v-model="tag.name"
          v-if="editable[index]"
          :ref="'editableInput' + index"
          @blur="handleEditableInputBlur(tag, index)"
          @change="handleEditableInputConfirm(tag, index)"
          @keyup.enter.native="handleEditableInputConfirm(tag, index)"
        />
        <el-tag
          v-else
          closable
          :disable-transitions="false"
          @click="showEditTagInput(row.id, tag.id, index)"
          @close="handleDelete(tag.id)"
          >{{ tag.name }}</el-tag
        >
      </div>
      <el-tag v-else :disable-transitions="false">{{ tag.name }}</el-tag>
    </div>
    <div style="width: 100px" v-if="sign === 1">
      <el-input
        size="small"
        maxlength="6"
        show-word-limit
        ref="saveTagInput"
        style="width: 100%"
        v-if="inputVisible"
        v-model="inputValue"
        @blur="handleInputConfirm"
        @keyup.enter.native="handleInputConfirm"
      />
      <el-button v-else size="small" @click="showInput(row.id)">
        + 新增选项
      </el-button>
    </div>
  </div>
</template>

<script>
import {
  postDatOptionGroupItemAdd,
  postDatOptionGroupItemUpdate,
  postDatOptionGroupItemDelete,
} from "@/api/evaluation";
export default {
  props: {
    row: {
      type: Object,
      default: {},
    },
    sign: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      inputVisible: "",
      editable: [],
      inputValue: "",
      optionList: [],
      groupId: null,
      id: null,
    };
  },
  methods: {
    //添加 选项信息  input显示
    showInput(id) {
      this.groupId = id;
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    //添加 选项信息 input失去焦点
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        let data = {
          name: inputValue,
          groupId: this.groupId,
        };
        this.postDatOptionGroupItemAdd(data);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    async postDatOptionGroupItemAdd(data) {
      const result = await postDatOptionGroupItemAdd(data);
      if (result.code == 200) {
        this.$emit("postDatOptionGroupList");
      }
    },
    //编辑 选项信息 input显示
    showEditTagInput(groupId, id, index) {
      this.groupId = groupId;
      this.id = id;
      this.$set(this.editable, index, true);
      this.$nextTick((_) => {
        var editableInput = "editableInput" + index;
        this.$refs[editableInput][0].$refs.input.focus();
      });
    },
    //编辑 选项信息 input发生改变
    handleEditableInputConfirm(item, index) {
      if (!item.name) {
        return this.$message.warning("选项不能为空！");
      }
      let data = {
        name: item.name,
        groupId: this.groupId,
        id: this.id,
      };
      this.postDatOptionGroupItemUpdate(data);
      this.$set(this.editable, index, false);
    },
    //编辑 选项信息 input失去焦点
    handleEditableInputBlur(item, index) {
      if (item.name) {
        this.$set(this.editable, index, false);
      }
    },
    async postDatOptionGroupItemUpdate(data) {
      const result = await postDatOptionGroupItemUpdate(data);
      if (result.code == 200) {
        this.$emit("postDatOptionGroupList");
      }
    },
    //删除选项信息
    handleDelete(id) {
      this.postDatOptionGroupItemDelete(id);
    },
    async postDatOptionGroupItemDelete(id) {
      const result = await postDatOptionGroupItemDelete(id);
      if (result.code == 200) {
        this.$emit("postDatOptionGroupList");
      }
    },
  },
};
</script>

 页面效果图：