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

最近在使用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这个大杀器。

 

 

评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值