elementUI 中tag的使用

<el-form-item label="標籤" class="partAdd_tag" prop="tags">

<el-tag
                                v-for="(tag, index) in dynamicTags"
                                :key="index"
                                closable
                                :disable-transitions="false"
                                @close="handleClose(tag)">
                            {{tag}}
                        </el-tag>
                        <el-tooltip class="item" effect="dark" content="爲組件打標籤，該標籤將顯示在主頁上，好比說：收藏SDK，能夠打上「Android」、「收藏」等標籤" placement="right">
                            <el-autocomplete
                                    class="input-new-tag"
                                    v-if="inputVisible"
                                    v-model="inputValue"
                                    :fetch-suggestions="querySearchAsync"
                                    ref="saveTagInput"
                                    size="small"
                                    @keyup.enter.native="handleInputConfirm(1)"
                                    @blur="handleInputConfirm(2)"
                                    :trigger-on-focus="false" popper-class="tag_insert_select"
                            >
                            </el-autocomplete>
                            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
                        </el-tooltip>
                    </el-form-item>
                    
                    var self = this
var validateTags = (rule, value, callback) => {
  if (self.dynamicTags.length <= 1) {
    return callback(new Error('請至少添加兩個標籤'))
  } else {
    return callback()
  }
}
tags: [
      { validator: validateTags, trigger: ['blur', 'change'] }
    ],
    dynamicTags: [],
    do_save (self) {
  // 獲取tag數據
  self.form.tags = self.dynamicTags.join()
  self.axios.post(self.publicPath + '/component/save', self.form).then(function (res) {
    if (res.data.code == 1) {
      self.$message({
        message: res.data.msg,
        type: 'success'
      })
      self.form.id = res.data.data
      setTimeout(self.doCancel, 1000)
    } else {
      self.$message.error(res.data ? res.data.msg : '操做失敗')
    }
  }).catch(function (error) {
    console.log(error)
    self.$message.error('網絡異常，請稍後再試')
  })
},
handleClose (tag) {
  this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
  this.$refs.ruleForm.validateField('tags')
},
showInput () {
  this.inputVisible = true
  this.$nextTick(_ => {
    this.$refs.saveTagInput.$refs.input.focus()
  })
},

defaultAction () {

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

handleInputConfirm (kind) {

if (kind == 1) {
    setTimeout(() => {
      this.defaultAction()
    }, 200)
  } else {
    this.defaultAction()
  }
},

.partAdd_tag{

text-align: left
}
.tag_insert_select{
    width: 150px!important;
}