element树形穿梭框

Element-ui提供的穿梭框只支持列表结构，但根据实际需求，可以自己编写一个左边是树结构，右边是列表结构的穿梭框。如果需要两边都是树结构的话，可以参考左侧的逻辑进行修改。在这个自定义的穿梭框中，可以使用vuedraggable插件来实现拖拽功能。\[1\]

根据你提供的需求，你想要实现一个选择人员的功能，左侧是一个树结构，用于展示人员的部门和岗位。当点击部门或岗位时，左侧的穿梭框会展示该部门或岗位下的人员，右侧的穿梭框则展示我们选择后的人员。同时，当我们选择完人员后，左侧的人员应该有一个被选择的状态。\[2\]

在父组件中，你可以使用以下代码来调用这个自定义的树形穿梭框：

<transfer v-model="transfer" :transferLoading="transferLoading" :userList="userList" :defaultSelectList="transfer" @finalUser="finalUser"></transfer>

其中，`v-model`用于双向绑定选择的人员列表，`transferLoading`用于控制加载状态，`userList`是用于展示的人员列表数据，`defaultSelectList`是默认选中的人员列表，`@finalUser`是一个回调函数，用于获取最终选择的人员列表。\[3\]

希望以上信息对你有帮助！如果还有其他问题，请随时提问。
#### 引用[.reference_title]
- *1* [基于Element-ui 封装穿梭框（左侧树 右侧列表，可全选，列表可拖拽）](https://blog.csdn.net/weixin_40615155/article/details/125606140)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [element：树与穿梭框相结合](https://blog.csdn.net/taoqidexiaojie/article/details/125896202)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]