就是会出现下面这样的情况,删除标签的时候输入框会又显示那个标签的值了
怎么办呢?,废话少说,看代码
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隐藏