Vue中使用el-tag标签实现增、删、改、查

背景

最近在项目中要使用element的Tag标签来实现一个功能，如图所示；

要求：

1、第一步：要根据select下拉框里面的值来判断div的显隐

表单里的选项下拉框

<el-form-item label="项目类型" :label-width="formLabelWidth" value="xxx" prop="xxx">
  <el-select class="questionInput" @change="addTag" v-model="submitData.xxx" filterable
             placeholder="请选择问题类型" clearable>
    <el-option
      v-for="(item,index) in getData"
      :key="index"
      :label="item.dic"
      :value="`${item.dic}|${item.dicCode}`">
    </el-option>
  </el-select>
</el-form-item>

使用v-if来判断，div的显隐

<div v-if="submitData.xxx==='单选题' || submitData.xxx==='多选题'" class="labelButton">
  <el-form-item>
    <el-tag
      :key="index"
      v-for="(tag,index) in dynamicTags"
      size="medium"
      class="labelButton"
      closable
      :disable-transitions="false"
      @close="handleClose(tag.optDesc)">
      {{ tag.optDesc }}
    </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(submitData)">+ 添加选项（回车保存）
    </el-button>
  </el-form-item>
</div>

在methods中写一个方法

addTag() {
  if (this.submitData.xxx) {
    [this.submitData.xxx, this.submitData.xxxCode] = this.submitData.xxx.split("|")
  }
},

2、第二步:把选项的字段放到tag标签的方法中

handleInputConfirm() {
  let inputValue = this.inputValue;
  if (inputValue) {
    this.dynamicTags.push({
      optDesc: inputValue,
    })
  }
  this.inputVisible = false;
  this.inputValue = ''
},

3、第三步：在新增的时候创建一个数组，把添加的tag标签push进去

newQue(formInline) {
  let new_que = []
  this.dynamicTags.forEach((item) => {
    new_que.push({
      optDesc: item.optDesc,
    })
  })