el-transfer 的用法
Transfer 穿梭框
基础用法
Transfer 的数据通过 data
属性传入。数据需要是一个对象数组,每个对象有以下属性:key
为数据的唯一性标识,label
为显示文本,disabled
表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 v-model
的变量,值为数据项的 key
所组成的数组。当然,如果希望在初始状态时目标列表不为空,可以像本例一样为 v-model
绑定的变量赋予一个初始值。
1 <template>2 <el-transfer v-model="value1" :data="data"></el-transfer>3 </template>4 5 <script>6 export default {7 data() {8 const generateData = _ => {9 const data = []; 10 for (let i = 1; i <= 15; i++) { 11 data.push({ 12 key: i, 13 label: `备选项 ${ i }`, 14 disabled: i % 4 === 0 15 }); 16 } 17 return data; 18 }; 19 return { 20 data: generateData(), 21 value1: [1, 4] 22 }; 23 } 24 }; 25 </script>
可搜索
在数据很多的情况下,可以对数据进行搜索和过滤。
设置 filterable
为 true
即可开启搜索模式。默认情况下,若数据项的 label
属性包含搜索关键字,则会在搜索结果中显示。你也可以使用 filter-method
定义自己的搜索逻辑。filter-method
接收一个方法,当搜索关键字变化时,会将当前的关键字和每个数据项传给该方法。若方法返回 true
,则会在搜索结果中显示对应的数据项。
1 <template>2 <el-transfer3 filterable4 :filter-method="filterMethod"5 filter-placeholder="请输入城市拼音"6 v-model="value2"7 :data="data2">8 </el-transfer>9 </template> 10 11 <script> 12 export default { 13 data() { 14 const generateData2 = _ => { 15 const data = []; 16 const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都']; 17 const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu']; 18 cities.forEach((city, index) => { 19 data.push({ 20 label: city, 21 key: index, 22 pinyin: pinyin[index] 23 }); 24 }); 25 return data; 26 }; 27 return { 28 data2: generateData2(), 29 value2: [], 30 filterMethod(query, item) { 31 return item.pinyin.indexOf(query) > -1; 32 } 33 }; 34 } 35 }; 36 </script>
可自定义
可以对列表标题文案、按钮文案、数据项的渲染函数、列表底部的勾选状态文案、列表底部的内容区等进行自定义。
可以使用 titles
、button-texts
、render-content
和 format
属性分别对列表标题文案、按钮文案、数据项的渲染函数和列表顶部的勾选状态文案进行自定义。对于列表底部的内容区,提供了两个具名 slot:left-footer
和 right-footer
。此外,如果希望某些数据项在初始化时就被勾选,可以使用 left-default-checked
和 right-default-checked
属性。最后,本例还展示了 change
事件的用法。注意:由于 jsfiddle 不支持 JSX 语法,所以本例在 jsfiddle 中无法运行。但是在实际的项目中,只要正确地配置了相关依赖,就可以正常运行。
1 <template>2 <el-transfer3 v-model="value3"4 filterable5 :left-default-checked="[2, 3]"6 :right-default-checked="[1]"7 :render-content="renderFunc"8 :titles="['Source', 'Target']"9 :button-texts="['到左边', '到右边']" 10 :format="{ 11 noChecked: '${total}', 12 hasChecked: '${checked}/${total}' 13 }" 14 @change="handleChange" 15 :data="data"> 16 <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button> 17 <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button> 18 </el-transfer> 19 </template> 20 21 <style> 22 .transfer-footer { 23 margin-left: 20px; 24 padding: 6px 5px; 25 } 26 </style> 27 28 <script> 29 export default { 30 data() { 31 const generateData = _ => { 32 const data = []; 33 for (let i = 1; i <= 15; i++) { 34 data.push({ 35 key: i, 36 label: `备选项 ${ i }`, 37 disabled: i % 4 === 0 38 }); 39 } 40 return data; 41 }; 42 return { 43 data: generateData(), 44 value3: [1], 45 renderFunc(h, option) { 46 return <span>{ option.key } - { option.label }</span>; 47 } 48 }; 49 }, 50 51 methods: { 52 handleChange(value, direction, movedKeys) { 53 console.log(value, direction, movedKeys); 54 } 55 } 56 }; 57 </script>
数据项属性别名
默认情况下,Transfer 仅能识别数据项中的 key
、label
和 disabled
字段。如果你的数据的字段名不同,可以使用 props
属性为它们设置别名。
本例中的数据源没有 key
和 label
字段,在功能上与它们相同的字段名为 value
和 desc
。因此可以使用props
属性为 key
和 label
设置别名。
1 <template>2 <el-transfer3 v-model="value4"4 :props="{5 key: 'value',6 label: 'desc'7 }"8 :data="data3">9 </el-transfer> 10 </template> 11 12 <script> 13 export default { 14 data() { 15 const generateData3 = _ => { 16 const data = []; 17 for (let i = 1; i <= 15; i++) { 18 data.push({ 19 value: i, 20 desc: `备选项 ${ i }`, 21 disabled: i % 4 === 0 22 }); 23 } 24 return data; 25 }; 26 return { 27 data3: generateData3(), 28 value4: [] 29 }; 30 } 31 }; 32 </script>
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
data | Transfer 的数据源 | array[{ key, label, disabled }] | — | [ ] |
filterable | 是否可搜索 | boolean | — | false |
filter-placeholder | 搜索框占位符 | string | — | 请输入搜索内容 |
filter-method | 自定义搜索方法 | function | — | — |
target-order |
右侧列表元素的排序策略:若为 original ,则保持与数据源相同的顺序;若为 push ,则新加入的元素排在最后;若为 unshift ,则新加入的元素排在最前
|
string | original / push / unshift | original |
titles | 自定义列表标题 | array | — | ['列表 1', '列表 2'] |
button-texts | 自定义按钮文案 | array | — | [ ] |
render-content | 自定义数据项渲染函数 | function(h, option) | — | — |
format | 列表顶部勾选状态文案 | object{noChecked, hasChecked} | — | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } |
props | 数据源的字段别名 | object{key, label, disabled} | — | — |
left-default-checked | 初始状态下左侧列表的已勾选项的 key 数组 | array | — | [ ] |
right-default-checked | 初始状态下右侧列表的已勾选项的 key 数组 | array | — | [ ] |
Slot
name | 说明 |
---|---|
left-footer | 左侧列表底部的内容 |
right-footer | 右侧列表底部的内容 |
Methods
方法名 | 说明 | 参数 |
---|---|---|
clearQuery | 清空某个面板的搜索关键词 | 'left' / 'right',指定需要清空的面板 |
Events
事件名称 | 说明 | 回调参数 |
---|---|---|
change | 右侧列表元素变化时触发 | 当前值、数据移动的方向('left' / 'right')、发生移动的数据 key 数组 |
转自: https://www.cnblogs.com/grt322/p/8553346.html
el-transfer 的用法相关推荐
- el表达式ne什么意思_JSP中EL表达式的用法详解(必看篇)
EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有EL都是以${ ...
- JSP中EL表达式的用法详解(必看篇)
转自:https://www.jb51.net/article/105314.htm EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL ...
- jsp中的EL表达式用法
1 EL 1.1 EL表达式 1.1.1EL表达式概述 基本概念 EL表达式,全称是Expression Language.意为表达式语言.它是Servlet规范中的一部分,是JSP2.0规范加入的内 ...
- @Value的诸多用法
搬运地址:@Value用法 留存做学习用 再附上自己学习使用过程中的记录记录 相互印证,发现当初自己只是用到了功能中很小的一部分... 对于从事java开发工作的小伙伴来说,spring框架肯定再熟悉 ...
- 基于elementui源码实现自定义穿梭框transfer组件
需求:更改elementui中el-transfer样式, 实现单击左侧选项即加入右边选框,单击右侧选项即可回到左侧选框,中间左右来回按钮更改为左侧全选右侧全选,最终修改后效果图如下 下图源码可通过g ...
- Element Transfer
效果图 这是 Element-UI 的 Transfer 组件,下面就配合源码看下具体实现. Template <template><div class="el-trans ...
- element 自定义处理transfer穿梭框
根据项目需求需要实现可以单选进行选择,并且点击左侧的时候自动添加到右侧中去,代码呈上 传入的参数:isradio=true时为单选模式只能从左侧选一个,为false的时候可进行多选 主页面:(可以通过 ...
- @Value竟然能玩出这么多花样
大家好,我是苏三,又跟大家见面了. 前言 对于从事java开发工作的小伙伴来说,spring框架肯定再熟悉不过了.spring给开发者提供了非常丰富的api,满足我们日常的工作需求. 如果想要创建be ...
- 如何分割字符串以便可以访问项目x?
使用SQL Server,如何分割字符串以便可以访问项x? 取一个字符串" Hello John Smith". 我如何按空格分割字符串并访问索引1的项目,该项目应返回" ...
- python 写txt 换行_python中写入txt文件需要换行,以及\r 和\n
在Python中,用open()函数打开一个txt文件,写入一行数据之后需要一个换行 如果直接用 f.write('\n') 只会在后面打印一个字符串'\n',而不是换行' 需要用 f.write(' ...
最新文章
- chrome浏览器插件开发经验(一)
- python关键字参数
- Linux系统中为php添加pcntl扩展的方法
- 快速搞懂 SQL Server 的锁定和阻塞
- laravel 任务队列_laravel队列-让守护进程处理耗时任务
- 麻将游戏-协议实现 笔记
- 小米MIX 4要来了?这硬件“堆”的也是没谁了 全是最新技术
- 解决wineQQ不能输入中文
- SWAT模型非点源模拟原理
- ssget 用法详解
- 怎样在苹果Mac鼠标或触控板上复制和粘贴?
- android 手机 瘦身,手机瘦身 Android系统程序精简教程(1)
- 抖音直播4种套路,让直播间人气快速破1000+
- 新媒体时代下如何践行网络口碑营销?
- C# 取QQ会话记录
- ABP VNext学习日记7
- 【强化学习】《动手学强化学习》马尔可夫决策过程
- Windows Vista SP1
- Caffe解惑:caffe中的前传和反传是如何确定的?
- 【算法-0】排序算法-双向冒泡排序(也称鸡尾酒排序、搅拌排序),附python代码+注释
热门文章
- AlienWare R8 换M.2 SSD系统盘 | AlienWare R8 BIOS 设置不保存
- IntelliJ IDEA快速入门 | 第二十九篇:你应该知道的那些常用模板
- IM系统的前世今生,搭建高性能、可拓展的IM系统
- GTAV pc版作弊码 【hot】
- Android实现换发型功能,实现一个Android中更换头像功能
- 查看端口被占用并删除端口( Ubuntu )
- MATLAB自动驾驶(1)——预构建场景库
- Discover - Elastic通过trace抓取信息到EXCEL
- Java基础巩固(一)类,接口,枚举,常用API,集合,泛型,正则,数据结构
- 联想ThinkBook14+ i5独显版使用感受