Element-UI 树形穿梭组件

Posted 2022-04-01 长不大的大灰狼

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的树形穿梭框组件