对element ui动态可编辑的tag进行优化，点击tag后变为input可编辑

对element ui动态可编辑的tag进行优化，点击tag后变为input可编辑

https://element.eleme.io/#/zh-CN/component/tag

重点1：$set的用法 修改响应数据

在data中声明editable: [],
通过this.$set(this.editable, index, true);来修改数组

this.$set(vm.item, indexOfItem, newValue);
this.set(vm.item, indexOfItem, newValue);
参数1：要处理的数组名称
参数2：要处理的数组索引
参数3：要处理的数组的值

this.$set(this.editable, index, true);

重点2： ref的使用

1. ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。

2. 如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了。

this.$refs[editableInput][0].$refs.input.focus();

重点3：element ui 中input获取焦点

1. Vue.nextTick()

• 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中
  在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。
• 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

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

源代码

<template>
  <el-form
    label-width="100px"
    class="my-form"
    size="mini"
    label-position="left"
  >
    <el-form-item label="部门职位">
      <div class="inline-box">
        <div v-for="(tag, index) in depatment_role_name" :key="index">
          <el-input
            class="input-new-tag"
            v-if="editable[index]"
            v-model="tag.label"
            :ref="'editableInput' + index"
            size="small"
            placeholder="请输入职位"
            @keyup.enter.native="handleEditableInputConfirm(tag, index)"
            @change="handleEditableInputConfirm(tag, index)"
            @blur="handleEditableInputBlur(tag, index)"
            maxlength="20"
            show-word-limit
          ></el-input>
          <el-tag
            v-else
            @click="showEditTagInput(index)"
            closable
            :disable-transitions="false"
            @close="handleClose(tag, index)"
            >{{ tag.label }}</el-tag
          >
        </div>
        <div>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
            maxlength="20"
            show-word-limit
          ></el-input>
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="showInput"
            >+ 新增职位</el-button
          >
        </div>
      </div>
    </el-form-item>
  </el-form>
</template>

export default {
  components: {
    // "v-chart": ECharts,
  },
  data() {
    return {
      depatment_role_name: [
        {
          value: 1,
          label: "选择1",
        },
        {
          value: 2,
          label: "选择2",
        },
        {
          value: 3,
          label: "选择3",
        },
      ],
      inputVisible: "",
      editable: [],
      inputValue: "",
    };
  },
  methods: {
    //============添加职位=====================
    //添加 职位信息  input显示
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    //添加 职位信息 input失去焦点
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        var tagInfo = {
          label: inputValue,
          value: this.depatment_role_name.length + 1,
        };
        this.depatment_role_name.push(tagInfo);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    //============编辑职位=====================
    //编辑 职位信息 input显示
    showEditTagInput(index) {
      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.label) {
        this.$set(this.editable, index, false);
      } else {
        this.$message({ message: "请输入职位信息", type: "info" });
      }
    },
    //编辑 职位信息 input失去焦点
    handleEditableInputBlur(item, index) {
      this.$set(this.editable, index, false);
    },
    //删除部门职位
    handleClose(tag, index) {
      this.depatment_role_name.splice(index, 1);
    },
  },
};

.inline-box {
  display: flex;
}
.inline-box > div {
  margin-right: 5px;
}