<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
    }