Antdv的TreeTransfer如何实现搜索

Ant Design Vue 的 TreeTransfer 组件提供了两个搜索框用于过滤数据，一个在源树上，另一个在目标树上。具体实现可以参考以下步骤：

1. 在 TreeTransfer 组件中添加两个搜索框，分别绑定到源树和目标树的过滤属性上：

<a-transfer
  :data-source="dataSource"
  :target-keys="targetKeys"
  :render="render"
>
  <template slot="footer">
    <a-input
      :placeholder="$t('components.transfer.searchPlaceholder')"
      :value="searchValue"
      @change="handleSearch('left', $event.target.value)"
      style="margin-bottom: 8px"
    />
    <a-input
      :placeholder="$t('components.transfer.searchPlaceholder')"
      :value="targetSearchValue"
      @change="handleSearch('right', $event.target.value)"
    />
  </template>
</a-transfer>

2. 在 TreeTransfer 组件的 `handleSearch` 方法中，根据搜索关键字过滤数据。可以使用 JavaScript 的 `filter` 方法来实现。这里以源树为例：

handleSearch(direction, value) {
  const filteredData = this.dataSource.filter(item => {
    // 判断节点是否符合搜索条件
    return item.title.indexOf(value) > -1;
  });

  // 更新源树的过滤结果
  this[`${direction}FilteredData`] = filteredData;

  // 更新源树的展开状态
  this[`${direction}ExpandedKeys`] = this.getExpandedKeys(filteredData);
}

3. 在 TreeTransfer 组件的 `render` 方法中，根据过滤结果渲染树节点。如果存在过滤结果，则使用过滤后的数据，否则使用原始数据：

render(item) {
  return item.title;
},

4. 最后，在 TreeTransfer 组件的 `getExpandedKeys` 方法中，根据过滤结果获取需要展开的节点的 key 值：

getExpandedKeys(data) {
  const keys = [];

  data.forEach(item => {
    // 如果节点有子节点，则递归获取子节点的 key 值
    if (item.children) {
      keys.push(item.key);
      keys.push(...this.getExpandedKeys(item.children));
    }
  });

  return keys;
},

通过以上步骤，就可以在 Ant Design Vue 的 TreeTransfer 组件上实现搜索功能了。