tree-transfer改造

若有冲突请联系删除

为实现如图所示穿梭狂左边两个其中上面为树形结构下面为最后一级的数据，采用对于el-transfer插件进行改造。

第一步安装

npm install el-tree-transfer --save
第二步引入

import treeTransfer from "el-tree-transfer"

第三步改造

在使用组件进行改造时，由于只有组件底部有插槽，故将树形结构插入底部插槽，然后采用flex倒序布局将尾部插槽提到顶部，其中的树形结构采用了懒加载具体方法可通过官网看实例。

    <tree-transfer
        :title="title"
        :from_data="transferLeftData"
        :to_data="transferRightData"
        :default-props="{ label: 'number', value: 'id' }"
        @addBtn="add"
        @removeBtn="remove"
        :mode="mode"
        height="540px"
        openAll
      >
        <div class="leftFooter" slot="left-footer">
          <el-tree
            @node-click="treeNodeClick"
            :load="loadNode"
            lazy
            :props="{ label: 'name', value: 'id' }"
            class="customTree"
          >
          </el-tree>
        </div>
      </tree-transfer>

/deep/.transfer-left {
  .transfer-main {
    display: flex !important;
    flex-direction: column-reverse;
    justify-content: flex-end;
  }
}
.leftFooter {
  height: 230px;
  background-color: rgba(250, 247, 250, 0.5);
}

.customTree {
  height: 200px !important;
  overflow-y: scroll !important;
  position: unset !important;
  background: white;
}