<a-tree-select>多选树组件的输入搜索功能清空
树型选择控件多选支持搜索的时候,输入文字,可以对树进行筛选:
<a-tree-select
class="w260"
multiple
placeholder="请选择业务分类"
v-model="queryParam.businessTypeIdList"
allowClear
:filterTreeNode="filterTreeOption"
@change="businessTypeChange"
treeDefaultExpandAll
>
<a-tree-select-node
v-for="i in businessTypesList"
:value="i.id"
:disabled="disabled"
:title="i.name"
:key="i.id"
>
<a-tree-select-node
v-for="item in i.children"
:filterTreeNode="filterTreeOption"
:value="item.id"
:title="item.name"
:key="item.id"
>
</a-tree-select-node>
</a-tree-select-node>
</a-tree-select>
直接清空控件绑定的值,即将v-modal绑定的queryParam.businessTypeIdList值置为空,输入的内容没有被清空。
那么想要清空输入的搜索内容,可以使用以下方法:
在<a-tree-select>控件中绑定以下属性:
:searchValue="searchvalueBusinessType"
这样获取到输入的内容之后,在想要清空的时候直接将输入内容置为空即可。
这里还有一个问题,就是虽然输入的内容被绑定为searchvalueBusinessType了,但是页面展示有问题,所以还需要绑定一个属性,用来接收输入的动作:
@search="businessTypeSearch"
businessTypeSearch(value){
this.searchvalueBusinessType = value
}