概述

双栏穿梭选择框,常用于将多个项目从一边移动到另一边。

说明

Transfer 组件主要基于以下四个 API 来使用:

  • :data:总体数据,数组,每项为一个对象,且必须含有 key 值,组件基于此做索引。
  • :target-keys:目标列索引集合,数组,每项为数据的 key 值,Transfer 会将含有这些 key 值的数据筛选到右边。  (注意是 key 的集合)
  • :render-format:每行数据显示的格式函数,默认优先显示 label 值,没有时显示 key 值,可以自己组合出需要的数据格式。
  • @on-change:当点击转移按钮时,组件本身并不会转移数据,而是触发事件,由用户来操作数据。

Transfer events

事件名 说明 返回值
on-change 选项在两栏之间转移时的回调函数 targetKeys, direction, moveKeys
on-selected-change 选中项发生变化时触发 sourceSelectedKeys, targetSelectedKeys

iview 之 穿梭框 transfer的更多相关文章

  1. vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询

    vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询 基于element Transfer http://element-cn.eleme.io/#/zh-CN/comp ...

  2. Ant Design Pro中Transfer穿梭框的实际用法(与后端交互)

    Ant Design Pro中Transfer穿梭框的实际用法(与后端交互) 该控件的属性以及属性的作用在ADP的官方文档中都有介绍,但没有讲如何与后端交互,本文旨在讲解该控件与后端的交互. Ant ...

  3. element-ui 穿梭框使用axios数据查询

    //class="input"样式自写,用来覆盖穿梭框自带的搜索,它自带的搜索框不能搜索外部数据,只能查询在穿梭框内的数据 <div style="text-ali ...

  4. vue实现穿梭框效果

    vue实现穿梭框效果 一.总结 一句话总结: 用两个数组分别记录左右框框里面的值,用两个数组绑定checkbox,用来记录选中的checkbox值,根据选中的checkbox的值实现删除增加即可 1. ...

  5. vue2.0 + element ui 实现表格穿梭框

    element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...

  6. 如何在vue+element中实现选择框和穿梭框的根据拼音以及拼音首字母以及汉字的模糊搜索

    1.汉字: 直接添加对应的 filterable     2.拼音: 穿梭框和选择器的实现方式有所不同   选择器:   <1>下载pinyin-match:   npm i --save ...

  7. 【vue系列】elementUI 穿梭框右侧获取当前选中项的值的思路

    最近 做了一个需求 在查询结果的表格中,选取(可多选)一些值,获取到保单号后,打开一个elementUI的穿梭框,然后获取到所有业务员,选取一些业务员后,将上一步获取到的保单号传递给业务员. 画个示意 ...

  8. Ag-grid控件使用pine:left后,配合iview下拉框,会出现闪烁

    Ag-grid控件使用pinned:left后,配合iview下拉框,会出现闪烁 引起原因:下拉图标的反转动画 目前解决方案: 添加一个全局样式: 禁用动画,其他地方也是如此, 影响控件有:gz-tr ...

  9. iview modal 弹框 模板

    iview modal 弹框 模板 <!-- * @description 上传图片 * @fileName camera.vue * @author 彭成刚 * @date // :: * @ ...

随机推荐

  1. Linux Mint 17使用配置

    => 调亮度: 方法一: 每次开机或注销登录之后需要重新设置 > /sys/class/backlight/intel_backlight/brightness #根据自己需要调值,如20 ...

  2. Hadoop(分布式系统基础架构)---Hive与HBase区别

    对于刚接触大数据的用户来说,要想区分Hive与HBase是有一定难度的.本文将尝试从其各自的定义.特点.限制.应用场景等角度来进行分析,以作抛砖引玉之用.  Hive是什么? Apache Hive是 ...

  3. 编写高质量代码改善C#程序的157个建议——建议98:用params减少重复参数

    建议98:用params减少重复参数 如果方法的参数数目不定,且参数类型一致,则可以使用params关键字减少重复参数声明. void Method1(string str, object a){} ...

  4. Javascirpt 常见的误区

    var foo = new Object(); var bar = new Object(); var map = new Object(); map[foo] = "foo"; ...

  5. 深入理解java虚拟机(十三) Java 即时编译器JIT机制以及编译优化

    在部分的商用虚拟机中,Java 程序最初是通过解释器( Interpreter )进行解释执行的,当虚拟机发现某个方法或代码块的运行特别频繁的时候,就会把这些代码认定为“热点代码”.为了提高热点代码的 ...

  6. 使用 JAVA 中的动态代理实现数据库连接池

    数据库连接池在编写应用服务是经常需要用到的模块,太过频繁的连接数据库对服务性能来讲是一个瓶颈,使用缓冲池技术可以来消除这个瓶颈.我们可以在互联网上找到很多关于数据库连接池的源程序,但是都发现这样一个共 ...

  7. CentOS7下搭建yum仓库

    服务端配置: 1.开启yum缓存 sed -i 's#keepcache=0#keepcache=1#g' /etc/yum.conf [root@control /]# cat /etc/yum.c ...

  8. 基于 ZKEACMS 的云建站 / 自助建站解决方案

    基于ZKEACMS的云建站 / 自助建站解决方案,一站式托管,解决企业建站需求,功能强大,高度自定义.用户只需在界面上输入一些基本信息,选择相应的主题 / 网站模板,然后就可以快速创建一个独一无二的网 ...

  9. Flash Builder 4.6/4.7 注释以及字体大小修改

    ①修改字体颜色.粗体.斜体.下划线 英文版:windows-preferences-flex-editors-syntex coloring-ActionScript-Comment 汉化版:窗口—首 ...

  10. python3 的zip()函数

    重点 https://blog.csdn.net/qq826364410/article/details/78259796 为啥会出现几个两个空列表????