关于Element ui Transfer (穿梭框)使用心得
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
最近在使用Element ui做一个大型的智能监测项目?,因客户需求中有需要使用到Transfer (穿梭框)这个功能,接下来就聊一聊(装x)我的使用心得。
首先客户的需求呢:通过穿梭框来实现对某个节点的配置关联。先看实现效果
这个需求实现不是很复杂,话不多说上源码:
<template>
<el-transfer
v-model="yesData"
:props="{key: 'id',label: 'name'}"
:titles="['未关联', '已关联']"
@change="handleChange"
:data="noData"
></el-transfer>
</template>
<script>
export default {
data() {
return {
noData: [{id:1,name:'测试1'},{id:2,name:'测试2'},{id:3,name:'测试3'}],
yesData: [1,3]
// 注意:key 的字符类型要一致!!!
}
},
methods:{
handleChange(value, direction, movedKeys) {
console.log(value, direction, movedKeys);
//可以通过direction回调right/left 来进行操作,right:把数字移到右边,left把数据移到左边
if(direction === "right") {
}
if(direction === "left") {
}
}
}
}
</script>
其标签含义官方文档已介绍很清楚了,我就这简单介绍:
v-model 存放右侧数据(数据必须在data(:data)中定义),只存放key,已[key0,key1,]格式存放;
props 数据源的字段别名 ;
titles 标题;
change 右侧列表元素变化时触发,也就是对中间的两个按钮触发,回调:handleChange(value, direction, movedKeys) value:当前值(右侧值),direction:数据移动的方向('left' / 'right'),movedKeys:发生移动的数据 key 数组;
value:
direction:
movedKeys:
data 数据源;
如有只用神器vs code 的同学,可以试试vscode-element-helper这个大杀器。
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 6 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)