当前位置：首页 > VUE

vue实现穿梭框树组件

2026-01-12 06:29:30VUE

Vue 穿梭框树组件实现

穿梭框树组件通常结合了树形结构和穿梭框功能，允许用户在左右两栏之间移动树节点数据。以下是基于 Vue 的实现方案：

核心功能设计

数据结构 树形数据通常采用嵌套结构，例如：

[
  {
    id: 1,
    label: '一级节点',
    children: [
      { id: 4, label: '二级节点' }
    ]
  }
]

组件拆分

树形渲染组件：递归渲染节点
穿梭操作按钮：左右移动逻辑
搜索过滤功能：对树节点进行筛选

实现步骤

树形组件封装 使用递归组件渲染树结构：

<template>
  <ul>
    <li v-for="node in treeData" :key="node.id">
      <input type="checkbox" v-model="node.checked">
      {{ node.label }}
      <tree-node v-if="node.children" :treeData="node.children"/>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeNode',
  props: ['treeData']
}
</script>

穿梭框主组件

<template>
  <div class="transfer-container">
    <div class="tree-box left">
      <tree-node :treeData="leftData"/>
    </div>

    <div class="transfer-buttons">
      <button @click="moveToRight">></button>
      <button @click="moveToLeft"><</button>
    </div>

    <div class="tree-box right">
      <tree-node :treeData="rightData"/>
    </div>
  </div>
</template>

核心移动逻辑

methods: {
  moveToRight() {
    const checkedNodes = this.getCheckedNodes(this.leftData)
    this.rightData = [...this.rightData, ...checkedNodes]
    this.removeNodes(this.leftData, checkedNodes)
  },

  getCheckedNodes(nodes) {
    let result = []
    nodes.forEach(node => {
      if (node.checked) result.push(node)
      if (node.children) {
        result = [...result, ...this.getCheckedNodes(node.children)]
      }
    })
    return result
  }
}

功能增强

搜索过滤 添加搜索框和过滤逻辑：

<input v-model="searchText" placeholder="搜索节点">

computed: {
  filteredData() {
    return this.treeData.filter(node => 
      this.filterNode(node, this.searchText)
    )
  }
},
methods: {
  filterNode(node, keyword) {
    return node.label.includes(keyword) || 
      (node.children && node.children.some(
        child => this.filterNode(child, keyword)
      ))
  }
}

性能优化

使用虚拟滚动处理大数据量
添加懒加载功能
实现节点展开/折叠功能

完整示例集成

建议使用现有库如：

vue-tree-halower 提供树形功能
结合 element-ui 的 transfer 组件改造
或基于 vuetify 的树形控件扩展

对于生产环境，推荐使用成熟的开源实现：

npm install vue-tree-list --save

或基于业务需求二次封装：

import { TreeTransfer } from 'vue-tree-transfer'
export default {
  components: { TreeTransfer },
  data() {
    return {
      data: [] // 树形数据
    }
  }
}