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