一个菜鸟的互联网技术分享博客
您的位置: 主页 > 关于Element ui Transfer (穿梭框)使用心得
advertisement

关于Element ui Transfer (穿梭框)使用心得

最近在使用Element ui做一个大型的智能监测项目,因客户需求中有需要使用到Transfer (穿梭框)这个功能,接下来就聊一聊(装x)我的使用心得。

首先客户的需求呢:通过穿梭框来实现对某个节点的配置关联。先看实现效果

这个需求实现不是很复杂,话不多说上源码:
 

其标签含义官方文档已介绍很清楚了,我就这简单介绍:

 

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这个大杀器
 

参考链接
zhangren.online
上一篇:JS 控制文本框只能输入中文、英文、数字与指定特殊符号
下一篇:图片和文字并行且文字上下居中

您可能喜欢

​javascript小数乘法精确率填坑

​javascript小数乘法精确率填坑

​使input文本框不可编辑的3种方法

​使input文本框不可编辑的3种方法

​canvas作图

​canvas作图

​boostrap之模态框取消按钮事件

​boostrap之模态框取消按钮事件

回到顶部