【AntDesign】AntDesign的穿梭框组件Transfer如何清空搜索框内容

1、在穿梭框中使用ref：

<template>
  <a-transfer
  	ref="transfer"
    :data-source="mockData"
    show-search
    :filter-option="filterOption"
    :target-keys="targetKeys"
    :render="item => item.title"
    @change="handleChange"
    @search="handleSearch"
  />
</template>

2、在需要清空的地方使用以下代码段

 //清空搜索框内容
      const tr = this.$refs.transfer
      if(tr){
        //左侧搜索框 0
        tr.$children['0'].$children['0']._data.filterValue=''
        //右侧搜索框 2
        tr.$children['0'].$children['2']._data.filterValue=''
      }

拓展使用

20220311更新
根据这个方法我们也可以清空带有搜索按钮的输入框的内容

具体使用方法如下：
在搜索框中也声明一个ref，此处为leftSearch

<a-input-search ref="leftSearch" placeholder="关键值搜索" size="large" @search="onSearch" allowClear>
	<a-button slot="enterButton" class="searchbtn">搜索</a-button>
</a-input-search>

我们可以在控制台输出leftSearch的结构

console.log(this.$refs["leftSearch"])

我们可以很容易的得到在它的$children[0]有一个stateValue属性和我们输入框输入的值是一样的，如下图

因此只需要将这个值设置为空就能成功清除搜索框的内容

this.$refs["leftSearch"].$children[0].stateValue = ''

参考
[1]:解决elementUI中穿梭框（transfer）组件搜索框中内容清除问题 https://www.cnblogs.com/xiaomili/p/13607853.html