a-select在mode="tags" 和:open="false"输入完后删除标签,会在输入框显示值

14 阅读1分钟

就是会出现下面这样的情况,删除标签的时候输入框会又显示那个标签的值了

888.gif

怎么办呢?,废话少说,看代码
html

    <div class="select_container">
      <a-select
        ref="select"
        style="width: 100%"
        placeholder="请选择"
        mode="tags"
        :value="internalValue"
        :disabled="disabled"
        :token-separators="[',']"
        :getPopupContainer=" (triggerNode) => { return triggerNode.parentNode || document.body; } "
        @inputKeydown="handleKeyDown"
        @change="handleSelectChange"
      >
      </a-select>
    </div>

js

   handleKeyDown(e) {
      const value = e.target.value
      if (e.key === 'Enter' && value) {
        if (this.internalValue.includes(value)) {
          this.$message.warning(`${value}标签已存在`)
        } else {
          this.internalValue.push(value)
        }
        this.$nextTick(() => {
          e.target.value = ''
        })
      }
    },
    handleSelectChange(e) {
      this.$nextTick(() => {
        this.internalValue = e
      })
    },

css

.select_container {
  display: flex;
  ::v-deep .ant-select-dropdown-menu {
    display: none;
  }
  ::v-deep .ant-select-dropdown {
    display: none;
  }
}

应该是:open="false"的问题,把:open="false"去掉,用css隐藏