Vue 搭配element-UI 实现可搜索穿梭框

最新推荐文章于 2025-10-13 07:00:00 发布

原创

最新推荐文章于 2025-10-13 07:00:00 发布 · 1.1w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#element-ui #可搜索穿梭框 #vue

本文基于Vue和Element-UI组件库，详细介绍了如何实现可搜索的穿梭框功能，强调了在实际应用中根据label进行搜索过滤的需求。在HTML部分，重点关注filterable属性的使用。在JavaScript部分，讨论了数据动态请求与处理，以及穿梭框数据格式的要求。需要注意v-model绑定的数组类型，避免出现错误。同时，提供了搜索功能的简化实现和QQ联系方式以便进一步交流。

首先，如果还没有看过官方的例子的话，建议先浏览下官方的文档，本文主要介绍的是自己踩过的坑。在这基础上，假设您已经有了一定的vue.js的基础
官方地址：
http://element.eleme.io/#/zh-CN/component/transfer

1、html 片段

注意：官网上的例子是给出了城市名，通过拼音搜索过滤，在线上环境中，我们可能通常需要根据lable(即显示的选项)直接进行搜索。在html代码段中，除了v-model及初始的数据集data(即选项)外，只需要一个filterable参数，后面的filter-method可以不需要

 <template>
    <el-transfer
         filterable
         v-model="value"
        :data="data">
        </el-transfer>
 </

最低0.47元/天解锁文章