基于vue和elementUI的穿梭框
elementUI中提供了很强大的穿梭框组件,但是在具体的项目或是业务中,还会有一些特殊的需求没有办法满足。所以抽空做了这个穿梭框组件,供我们当前所迭代的产品使用,目前时初步试用,会再根据试用过程中做的优化再度更新。
现在发出来是希望如果有遇到同样开发需求的童鞋,可以一起来完善这个组件。
安装 npm install transfer-table
代码仓链接 link.
简介:
标签使用
<transfer
:titles="['热门排行','我喜欢的']"
:dataArr="dataArr"
:totals="[134,26]"
filterable
:filterplaceholder="'请输入关键词'"
:filterType="1"
:pageBar="[true,true]"
@currentChange="currentChange"
@change="changeData"
></transfer>
<!--
2.参数说明
titles title标题 数组
dataArr 穿梭框数据 数组[[左侧的数据],[右侧的数据]]
[{label:"暮光之城",key:"11",text:"爱情",icon:"el-icon-present",disabled:false,tooltip:true},]
label 左侧主要名称
text 右侧类型显示
icon elementUI中的icon
disabled 是否禁用
tooltip 是否鼠标浮显
totals 列表中右上角的总数 数组
filterable 开启搜索
filterplaceholder 搜索框中的提示词
filterType 搜索类型 0:在当前结果中按名称搜索 1:返回给父级通过接口搜索
pageBar 是否使用方格分页 数组形式(如上)true:按方格显示分页 false:滚动加载
3.事件说明
currentChange 翻页事件 返回两个传参 (left/right,页数)
changeData 点击穿梭 返回四个传参(left/right,操作的数据,左侧数据,右侧数据)
searchKeyRight 搜索数据 按输入的文字调接口搜索
searchKeyLeft 搜索数据 按输入的文字调接口搜索
-->