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