vue 穿梭框可查询

Vue的穿梭框（Transfer）组件通常用于在两个列表之间进行数据的转移和选择。如果你想要在穿梭框中添加搜索功能，可以使用Vue的计算属性和过滤器来实现。

首先，你可以在穿梭框组件中添加一个输入框，用于输入搜索关键字。然后，使用计算属性来过滤列表中的数据，只显示与搜索关键字匹配的项。

下面是一个简单的示例代码：

<template>
  <div>
    <input type="text" v-model="keyword" placeholder="输入关键字搜索">
    <el-transfer
      filterable
      :filter-method="filterMethod"
      :data="data"
      :target-keys="targetKeys"
      @change="handleChange"
    ></el-transfer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      data: [], // 穿梭框的数据源
      targetKeys: [], // 已选项的key
    };
  },
  computed: {
    filteredData() {
      const keyword = this.keyword.toLowerCase();
      return this.data.filter(item => item.label.toLowerCase().includes(keyword));
    },
  },
  methods: {
    filterMethod(query, item) {
      return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
    },
    handleChange(targetKeys) {
      this.targetKeys = targetKeys;
    },
  },
};
</script>

在上面的示例中，我们使用了Element UI库中的`el-transfer`组件，并配置了`filterable`属性以开启过滤功能。然后，我们通过`filter-method`属性指定了一个过滤方法`filterMethod`，该方法用于判断每一项是否匹配搜索关键字。在计算属性`filteredData`中，我们根据搜索关键字对数据进行过滤操作。

当用户输入关键字时，过滤方法`filterMethod`会自动调用，根据返回值（true或false）来判断是否显示该项。最后，我们在`@change`事件中监听选项的变化，将选中的项保存到`targetKeys`中。

这样，你就可以在Vue的穿梭框中添加搜索功能了。根据你的实际需求，你可能需要对示例代码进行适当的修改和调整。希望对你有所帮助！