vue实现循环数据动态添加标签以及单独控制显示隐藏

效果图：

 html: 

<table class="tag-table">
              <tbody>
                <tr v-for="(item, index) in form.tagList" :key="index">
                  <td>333</td>
                  <td>
                    <div
                      class="tag-box"
                      v-for="(item1, index1) in item.tags"
                      :key="index1"
                    >
                      <span>{{ item1.label }}</span>
                      <i
                        class="tag-close el-icon-close"
                        @click="delTag(item1, index)"
                      ></i>
                    </div>
                    <el-input
                      class="input-new-tag"
                      v-if="item.inputVisible"
                      v-model="item.inputValue"
                      :ref="`saveTagInput${index}`"
                      size="small"
                      @keyup.enter.native="handleInputConfirm(item, index)"
                      @blur="handleInputConfirm(item, index)"
                    >
                    </el-input>
                    <div v-else class="new-tag" @click="showInput(item, index)">
                      + 新增
                    </div>
                  </td>
                </tr>
              </tbody>
</table>

js: 

handleClose(item1, index) {
      this.form.tagList[index].tags.splice(
        this.form.tagList[index].tags.indexOf(item1),
        1
      );
    },
    showInput(item, index) {
      this.$set(this.form.tagList, index, {
        ...item,
        inputVisible: true,
      });
      this.$nextTick(() => {
        let saveTagInput = `saveTagInput${index}`;
        this.$refs[saveTagInput][0].$refs.input.focus();
      });
    },
    handleInputConfirm(item, index) {
      console.log(item.inputValue, 666);
      if (item.inputValue) {
        this.form.tagList[index].tags.push({
          label: item.inputValue,
        });
        this.$set(this.form.tagList, index, {
          ...item,
          inputVisible: false,
          inputValue: "",
        });
      }
    },
    async getTag() {
      const {
        code,
        data = [],
        message,
      } = await this.$store.dispatch(
        "taskPlan/getTag",
        this.$route.query.strategyId
      );
      if (code !== 0) {
        this.$message.error(message);
        return;
      }
      this.form.tagList = data;
      for (let i = 0; i < this.form.tagList.length; i++) {
        this.form.tagList[i].inputVisible = false;
        this.form.tagList[i].inputValue = "";
      }
    },