基于vue Transfer 穿梭框

效果图：

html:

 <el-transfer
          filterable
          v-model="roleData"
          @change="transferChange"
          :data="data"
          :titles="['所有未绑定角色', '所有已绑定角色']"
          :button-texts="[ '解绑','绑定']"
        ></el-transfer>

数据：

 //arr 为后端返回所有数据
 for(let i = 0 ;i<arr.length;i++){
                  let obj = {};
                  obj.key=arr[i].id;
                  obj.label=arr[i].role_name;
                  arr2.push(obj)
                }
                this.data=arr2;//这里拿到所有的数据
                //下面是取已经绑定的数据，that.role_data.上面已经获取了这个数据，也就是说这个数据就是这个角色已经有的，我们只要取id 就好了
                let arr3=[];
                for(let i = 0 ;i<that.role_data.length;i++){
                  arr3.push(that.role_data[i].id)
                }
                that.roleData=arr3 ;
                console.log(that.roleData);