概述

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

说明

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. java调.NET webapi时间戳报错问题

    JAVA时间戳长度是13位,如:1294890876859 PHP .NET时间戳长度是10位, 如:1294890859 主要最后三位的不同,JAVA时间戳在.NETPHP中使用,去掉后三位,如:1 ...

  2. logcat命令详解【一】

    Android日志系统提供了记录和查看系统调试信息的功能.日志都是从各种软件和一些系统的缓冲区中记录下来的,缓冲区可以通过logcat命令来查看和使用. 在使用logcat之前,请确保手机的USB调试 ...

  3. 浏览器透明设置例子,qt5.6才支持

    用simpleBrowser例子的基础上,在BrowserWindow构造函数修改如下 BrowserWindow::BrowserWindow(QWidget *parent, Qt::Window ...

  4. javascript总结22: javascript的对象--面向对象编程

    1 对象:JavaScript 中的所有事物都是对象:字符串.数值.数组.函数. 对象与程序的关系: 程序 = 基于对象操作的算法 + 以对象为最小单位的数据结构 此外: 面向对象的本质就是让对象有多 ...

  5. 编写高质量代码改善C#程序的157个建议——建议153:若抛出异常,则必须要注释

    建议153:若抛出异常,则必须要注释 有一种必须加注释的场景,即使异常.如果API抛出异常,则必须给出注释.调用者必须通过注释才能知道如何处理那些专有的异常.通常,即便良好的命名也不可能告诉我们方法会 ...

  6. Linux CentOS 7 安装confluence 5.8.10

    一..需要下载的安装包如下 1.atlassian-confluence-5.8.10-x64.bin #confluence安装包 2.confluence5.x-crack.zip #conflu ...

  7. 【微服务架构】SpringCloud之Eureka(注册中心集群篇)(三)

    上一篇讲解了spring注册中心(eureka),但是存在一个单点故障的问题,一个注册中心远远无法满足实际的生产环境,那么我们需要多个注册中心进行集群,达到真正的高可用.今天我们实战来搭建一个Eure ...

  8. Tomcat安装JPress

    上线代码有两种方式,第一种方式是直接将程序目录放在webapps目录下面,这种方式大家已经明白了,就不多说了.第二种方式是使用开发工具将程序打包成war包,然后上传到webapps目录下面.下面让我们 ...

  9. [Delphi]接口认识

    Delphi中的接口用 interface 进行声明.接口是针对行为方法的描述,而不管他实现这种行为方法的是对象还是别的什么东西.因此,接口和类的出发点是不一样的,是在不同的角度看问题. 接口通过GU ...

  10. C#中使用Redis学习二 在.NET4.5中使用redis hash操作

    上一篇>> 摘要 上一篇讲述了安装redis客户端和服务器端,也大体地介绍了一下redis.本篇着重讲解.NET4.0 和 .NET4.5中如何使用redis和C# redis操作哈希表. ...