最近遇到个需求,穿梭框中的内容是树形结构的数据。查看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"