vue实现树穿梭

Vue 实现树形穿梭框

在 Vue 中实现树形穿梭框（Tree Transfer）可以通过结合树形控件和穿梭框组件完成。以下是实现方法：

使用 Element UI 的 Tree 和 Transfer 组件

Element UI 提供了 Tree 和 Transfer 组件，可以组合实现树形穿梭框功能。

安装 Element UI：

npm install element-ui

在 Vue 文件中引入 Tree 和 Transfer 组件：

import { Tree, Transfer } from 'element-ui'

定义数据和方法：

export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: '一级 1',
          children: [
            { id: 4, label: '二级 1-1' }
          ]
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            { id: 5, label: '二级 2-1' },
            { id: 6, label: '二级 2-2' }
          ]
        }
      ],
      transferData: [],
      targetKeys: []
    }
  },
  methods: {
    filterMethod(query, item) {
      return item.label.indexOf(query) > -1
    }
  }
}

模板部分：

<el-transfer
  v-model="targetKeys"
  :data="transferData"
  :titles="['源列表', '目标列表']"
  :filter-method="filterMethod"
  filterable>
</el-transfer>

<el-tree
  :data="treeData"
  show-checkbox
  node-key="id"
  @check-change="handleCheckChange">
</el-tree>

自定义树形穿梭框实现

如果需要更自定义的功能，可以完全自己实现树形穿梭框。

定义组件结构：

<div class="tree-transfer">
  <div class="source-tree">
    <tree :data="sourceData" @node-click="handleNodeClick"></tree>
  </div>
  <div class="transfer-buttons">
    <button @click="moveToTarget">></button>
    <button @click="moveToSource"><</button>
  </div>
  <div class="target-tree">
    <tree :data="targetData"></tree>
  </div>
</div>

处理数据移动逻辑：

methods: {
  handleNodeClick(node) {
    this.selectedNode = node
  },
  moveToTarget() {
    if (this.selectedNode) {
      this.targetData.push(this.selectedNode)
      this.sourceData = this.sourceData.filter(item => item.id !== this.selectedNode.id)
    }
  },
  moveToSource() {
    if (this.selectedNode) {
      this.sourceData.push(this.selectedNode)
      this.targetData = this.targetData.filter(item => item.id !== this.selectedNode.id)
    }
  }
}

使用第三方组件

也可以考虑使用专门为 Vue 开发的树形穿梭框组件，如 vue-tree-transfer：

安装：

npm install vue-tree-transfer

使用：

import TreeTransfer from 'vue-tree-transfer'

export default {
  components: { TreeTransfer },
  data() {
    return {
      data: [
        { id: 1, label: 'Node 1', children: [...] }
      ],
      value: []
    }
  }
}

<tree-transfer
  :data="data"
  v-model="value"
  :props="{ label: 'label', children: 'children', key: 'id' }">
</tree-transfer>

以上方法提供了不同复杂度的实现方案，可以根据项目需求选择合适的实现方式。