由于本人是个才开始的新人前端,所以用的方法和写的代码很一般,仅仅个人参考
原文:Transfer 的数据通过 data 属性传入。数据需要是一个对象数组,每个对象有以下属性:key 为数据的唯一性标识,label 为显示文本,disabled 表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 v-model 的变量,值为数据项的 key 所组成的数组。当然,如果希望在初始状态时目标列表不为空,可以像本例一样为 v-model 绑定的变量赋予一个初始值。
解读:靠data 来绑定元数据,这个元数据就是所有你想出现在这个穿梭框上的数据,我的问题就是,需要显示已添加与未添加数据,这里的data绑定数据就需要使用你所获取的所有数据(包含已添加与未添加),加在一起形成一个新数组(列如已添加:5人,未添加:4人那这个数组就是9人),在组成总数据后,还需要进行下数据替换,换成满足插件使用的样子,在上方例子中就出现for循环一个新数组,这个数组内需要重构成含有 key(唯一标识符,一般是传id之内),label(显示的名称下方就是显示的终端姓名),disabled(禁用那些数据),还有些其他参数我因为没用就没看了,更多详细的请参考https://element.eleme.cn/#/zh-CN/component/transfer官方文档,在总数组重构后,我们还需要将放在右边框位置的数据也进行一样的重构,不过这时我们只需要key(id)就可以了,向例子中的value:[1,4],绑定在v-model里,组件会自动根据key来讲出现的key自动变到右边去;后面还有交换事件,可以监听到交换值(key),可以直接用;