vue实现树穿梭
Vue 实现树形穿梭框
树形穿梭框是一种常见的交互组件，允许用户在左右两棵树之间移动节点。以下是实现方法：
安装依赖
需要安装 element-ui 或 ant-design-vue 这类 UI 库，它们提供了现成的树形穿梭组件。
npm install element-ui基础实现
使用 el-transfer 和 el-tree 组合实现树形穿梭功能。
<template>
<div>
<el-transfer
v-model="selectedKeys"
:data="data"
:props="transferProps"
:titles="['源树', '目标树']"
filterable>
<el-tree
slot="left"
:data="sourceTree"
node-key="id"
:props="treeProps"
@node-click="handleNodeClick">
</el-tree>
<el-tree
slot="right"
:data="targetTree"
node-key="id"
:props="treeProps">
</el-tree>
</el-transfer>
</div>
</template>
<script>
export default {
data() {
return {
selectedKeys: [],
sourceTree: [
{ id: 1, label: '一级 1', children: [...] },
{ id: 2, label: '一级 2', children: [...] }
],
targetTree: [],
treeProps: {
children: 'children',
label: 'label'
},
transferProps: {
key: 'id',
label: 'label'
}
}
},
methods: {
handleNodeClick(data) {
// 处理节点点击事件
}
}
}
</script>自定义实现 如果需要完全自定义实现，可以创建两个树组件和移动按钮：
<template>
<div class="tree-transfer">
<div class="tree-container">
<el-tree :data="leftData" ref="leftTree" @check-change="handleCheckChange"></el-tree>
</div>
<div class="transfer-buttons">
<el-button @click="moveToRight">></el-button>
<el-button @click="moveToLeft"><</el-button>
</div>
<div class="tree-container">
<el-tree :data="rightData" ref="rightTree"></el-tree>
</div>
</div>
</template>
<script>
export default {
data() {
return {
leftData: [...],
rightData: [],
checkedNodes: []
}
},
methods: {
handleCheckChange(node, checked) {
this.checkedNodes = this.$refs.leftTree.getCheckedNodes()
},
moveToRight() {
// 实现从左树移动到右树的逻辑
},
moveToLeft() {
// 实现从右树移动到左树的逻辑
}
}
}
</script>
<style>
.tree-transfer {
display: flex;
justify-content: space-between;
}
.tree-container {
width: 45%;
}
.transfer-buttons {
display: flex;
flex-direction: column;
justify-content: center;
}
</style>功能增强
- 添加搜索过滤功能
- 支持拖拽移动节点
- 添加全选/反选功能
- 支持异步加载节点数据
注意事项
- 确保节点有唯一标识符（如id）
- 处理移动时的父子节点关系
- 考虑性能优化，对于大数据量使用虚拟滚动
- 移动后更新左右树的数据源
这种实现方式既可以使用现成组件快速搭建，也可以完全自定义满足特定需求。根据项目实际情况选择合适方案。
