初探如何巧妙融合el-tree和el-transfer：打造独一无二的树形穿梭框

2023-10-31 00:49:47

前言

在不久前，我遇到一个需求，要求在穿梭框中展示树形结构的数据。起初，我想到直接使用elementUI的transfer组件，但它并不支持树形结构的数据。因此，我决定将el-tree组件和transfer组件结合起来，创建一个树形穿梭框。

实现步骤

首先，需要clone一份element的源码。
接下来，找到packages/transfer文件夹，打开transfer.vue文件。
在transfer.vue文件中，找到下面的代码：

<el-transfer
  v-model="selectedKeys"
  :data="sourceData"
  :filterable="filterable"
  :props="props"
  :render-content="renderContent"
  @on-change="handleChange"
/>

将上面的代码替换为下面的代码：

<el-tree
  v-model="selectedKeys"
  :data="sourceData"
  :filterable="filterable"
  :props="props"
  :render-content="renderContent"
  @on-change="handleChange"
/>

保存transfer.vue文件，然后运行npm run build命令。
现在，就可以在项目中使用树形穿梭框了。

使用方法

在项目中使用树形穿梭框，需要先安装elementUI的依赖：

npm install element-ui

然后，在main.js文件中引入elementUI和树形穿梭框组件：

import Vue from 'vue'
import ElementUI from 'element-ui'
import TreeTransfer from './components/TreeTransfer.vue'

Vue.use(ElementUI)
Vue.component('tree-transfer', TreeTransfer)

最后，在需要使用树形穿梭框的组件中，可以使用下面的代码：

<template>
  <div>
    <tree-transfer :data="data"></tree-transfer>
  </div>
</template>

<script>
import TreeTransfer from './components/TreeTransfer.vue'

export default {
  components: { TreeTransfer },
  data() {
    return {
      data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }, {
          label: '二级 1-2'
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1'
        }, {
          label: '二级 2-2'
        }]
      }]
    }
  }
}
</script>