Element-UI 树形穿梭组件

一、基本使用

npm install el-tree-transfer --save

<template>
    <div>
    // 使用树形穿梭框组件
    <tree-transfer :title="title"
     :from_data='fromData'
     :to_data='toData'
     :defaultProps="{label:'label'}"
     :mode='mode'
      height='540px'
      filter
      openAll>
    </tree-transfer>
  </div>
</template>  

<script>
import treeTransfer from 'el-tree-transfer' // 引入

export defult {
    components:{ 
	    treeTransfer 
    } // 注册
    data(){
      return:{
        mode: "transfer", // transfer addressList
        fromData:[
          {
            id: "1",
            pid: 0,
            label: "一级 1",
            children: [
              {
                id: "1-1",
                pid: "1",
                label: "二级 1-1",
                children: []
              },
              {
                id: "1-2",
                pid: "1",
                label: "二级 1-2",
                children: [
                  {
                    id: "1-2-1",
                    pid: "1-2",
                    children: [],
                    label: "二级 1-2-1"
                  },
                  {
                    id: "1-2-2",
                    pid: "1-2",
                    children: [],
                    label: "二级 1-2-2"
                  }
                ]
              }
            ]
          },
        ],
        toData:[]
      }
    },
    methods:{
     //
    },
  }
</script>

二、参数设置

参数	说明	类型	必填	可选值	默认值	补充
title	标题	String	false		[“源列表”, “目标列表”]
from_data	源数据	Array	true		数据格式同element-ui tree组件，但必须有id和pid
to_data	目标数据	Array	true		同上
defaultProps	同el-tree中props	Object	false		{ label: “label”, children: “children”, isLeaf: “leaf”, disable: “disable” }
node_key	默认为id	String	false		id	必须与treedata数据内的id参数名一致，必须唯一
pid	默认为"pid"	String	false		pid

参考文章：
[1] 一个基于vue和element-ui的树形穿梭框组件