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

1、html 片段

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

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

2、js代码

在通常情况下，选项data集可能是需要动态请求的，并且在穿梭框中，data数据集数据格式需要处理一下。
请求数据的接口，这里就先不写了，只是请求回数据后，数据需要处理一下，并将处理后的列表赋值给data.
这里我定义了一个函数：

        dealData(tmpData) {if (tmpData) {const data1 = []tmpData.forEach((asset, index) => {data1.push({label: asset.sn,key: asset.sn,index: index})})return data1}},

这里解释一下，函数的参数是一个列表，列表项又是一个字典，如：
[{‘sn’:1,’name’:’test1’},{‘sn’:2,’name’:’test2’}…]这种格式，可以根据需要设置，这里返回一个列表，列表项也是字典类型，其中：‘label’就是页面上显示的内容项，key其实就是选中时表达提交时的值，index暂时没用到，可以根据需要保留。

备注

1、在v-model绑定的数据类型一定要注意，需要是数组。否则会报错:e.splice is not a function,导致选中的数据不能从右边移到左边。
2、实现搜索功能时，可以不用定义filter-method方法。当然了，如果需要的话可以探索（我调试了好久老报错，决定先不采用了）
3、其他问题欢迎随时沟通。QQ：951205228

Vue 搭配element-UI 实现可搜索穿梭框相关推荐

Vue在Element UI下使用富文本框插件quill-editor（我个人不推荐用这个复杂的富文本插件）
cnpm install vue-quill-editor cnpm install quill-image-drop-module cnpm install quill-image-resize-m ...
Element Tiptap Editor - 免费开源的 Vue 富文本编辑器，专门为搭配 Element UI 使用优化，使用很简单
一款很容易上手配置的富文本编辑器,和 Element plus 一起使用效果非常好,还能自定义功能. 关于 Element Tiptap Editor Element Tiptap Editor 是一 ...
【Vue】 element ui 引入第三方图标
最近一个项目用到 vue 和 element ui开发前端.使用element ui自带的icon太少,所以引入第三方的.截止目前为止国内外网络上的相关教程我搜索到没超过5篇,而且都不详细,即使全部阅 ...
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
Node mysql mvc vue_net MVC +Vue.js+Element UI 笔记
最近项目需求,要在MVC里用Vue 与 Element UI,故而做个笔记来记录一些遇到的问题和处理思路 (方式比较麻瓜,如果不是临时用的话,建议还是学一下Vue-cli,新项目还是老老实实前后端分离 ...
Vue安装element ui踩坑
在vue安装element ui 的过程中报了许多错误,慢慢踩坑,希望能帮到各位 1. 输入 vue add element 输入 y y zh-CN 如果报错 ERROR comman ...
vue搭配element, el-input出现高频无法粘贴文本的情况
vue搭配element, el-input出现高频无法粘贴文本的情况,刷新下浏览器就又可以粘贴了,没有找到原因. 上网找了好久没有找到问题突破口,有大佬遇到了并解决了吗?
解决模糊查询问题 element UI 从服务器搜索数据，输入关键字进行查找
解决模糊查询问题 element UI 从服务器搜索数据,输入关键字进行查找参考文章: (1)解决模糊查询问题 element UI 从服务器搜索数据,输入关键字进行查找 (2)https://ww ...
vue开源Element UI表单设计及代码生成器
1 可视化设计器设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代码可直接运行在基于 Element 的 vue 项目中. github仓库 https:// ...

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

1、html 片段

2、js代码

备注

Vue 搭配element-UI 实现可搜索穿梭框相关推荐

最新文章

热门文章