概述

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

说明

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. Android 修改 TextView 的全局默认颜色。

    如果你的应用中大多数TextView的颜色是红色, 或者其他颜色, 你是为每一个TextView都设置一次颜色, 还是有其他更好的办法, 这里教你怎么修改TextView的默认颜色. 当然我们Text ...

  2. SAC学习笔记（一）——SAC安装

    1.软件包申请 地址: http://www.iris.edu/forms/sac_request.htm      其中的表单需要正确认真填写,选择你所需要的系统平台Linux.Mac OS.Sol ...

  3. C# JSON使用过程中开发的小工具

    我在用JSON的过程中,经常要去看一下JSON的结构,而JSON串大不部分时候都是未格式化的数据,一次我不得不用一些网页上的在线解析和格式化工具来进行格式化查看,但是这些网页有时候并不好用:因此就结合 ...

  4. Swift实现Touch ID验证

    iOS8开放了很多API,包括HomeKit.HealthKit什么的.我们这里要说的是其中之一的Touch ID验证. 以前用app保护用户的隐私内容,只能设定和输入密码.眼看着只能是iPhone本 ...

  5. Json字符串转对象和转List集合操作

    对象POJO和JSON互转 public class JsonUtil { /** * JSON 转 POJO */ public static <T> T getObject(Strin ...

  6. HibernateTemplate常用方法

    HibernateTemplate常用方法 (本文章内容相当于转载自:http://www.tuicool.com/articles/fU7FV3,只是整理了一下内容结构和修改了部分内容,方便阅读) ...

  7. Android 画闹钟

    1.今天就来模仿一下这个小闹钟的 2.思路: 先画闹钟的圆盘 ,在通过Path来画指针 两个耳朵其实就是用两个圆被一个大圆截取后留下的,并旋转一定度数后生成 3.直接上代码: public class ...

  8. TSQL--SORT MERGE JOIN

    算法:对两表排序,然后对两表依次扫描,找到符合条件的结果集 sort(T1); seort(T2); int k=0;--for T1 index int m=0;--for T2 index whi ...

  9. php面试题汇集2

    1.实现中文字符串截取无乱码方法 开启mbstring扩展,然后自定义函数: <?php header('content-Type:text/html:charset=utf-8'); func ...

  10. Chart.js入门教程

    Chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库. 相信大部分人都一样,看到一大筐用文本或者表格形式呈现的数据就头疼.因为这种呈现方式也太无聊了吧...而且这对于我们处理原始 ...