自定义穿梭框 vue穿梭框

基于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 搜索数据 按输入的文字调接口搜索
-->
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值