tree结构穿梭 vue_结合el-tree和el-transfer搞一个树形穿梭框

最近遇到个需求，穿梭框中的内容是树形结构的数据。查看elementUI的transfer组件是不支持树形结构的数据，也就不能直接使用了。但是el-tree组件支持啊，那如果让tree组件和transfer组件结合一下岂不完美。

准备

clone一份element的源码，找到package/tansfer/src文件夹，里面的vue文件就是我们的目标。复制一份出来到自己的项目(同时复制mixins里的emitter.js和migrating.js)，接下来就对它进行改造。

|-- components

| |-- mixins

| | |-- emitter.js

| | |-- migraing.js

| |-- main.vue

| |-- transfer-panel.vue

复制代码

使用

使用之前先对main.vue，transfer-panel.vue两个文件进行简单的修改。删除locale相关代码。emitter.js和migrating.js因为路径变化需要重新引入。然后在其它组件中引入main.vue就可以使用啦(和直接使用el-transfer是一样的)。

...

import iElTransfer from '../components/main'

export default {

name: 'home',

components: {

iElTransfer

},

data () {

return {

data: [

{ key: 1, label: '备选项1', disabled: false },

{ key: 2, label: '备选项2', disabled: false }

...

]

}

}

...

}

复制代码

改造

将原来的单层结构转换成树形结构，我们有现成的el-tree使用，所以将原来显示内容的区域换成el-tree组件看看。

# transfer-panel.vue

...

v-model="checked"

v-show="!hasNoMatch && data.length > 0"

:class="{ 'is-filterable': filterable }"

class="el-transfer-panel__list">

class="el-transfer-panel__item"