tree transfer
1.0.0
el-tree-fransfer は、VUE と element-ui をベースにしたツリー シャトル ボックス コンポーネントです。使用する前に、element-ui が導入されていることを確認してください。 このコンポーネントの機能はelement-uiの transfer コンポーネントと似ていますが、内部のデータはツリー構造になっています。 実際、el-tree-transfer が依存する element-ui コンポーネントは、Checkbox、Button、およびメインの Tree ツリー コントロールです。これは element-ui のシャトル ボックス コンポーネントの拡張ではなく、単にその外観、スタイル、機能を指すだけです。
会社のビジネスでは Vue フレームワークが使用されているため、UI ライブラリは element-ui を使用します。便利な Vue ツリー シャトル ボックス コンポーネントを市場で見つけるのは困難です。また、シャトル ボックスのためだけに element-ui 以外の他の重量のあるプラグインを導入したくないため、el-tree-transfer が存在します。軽量で使いやすく、追加の学習コストは必要ありません。
2.4.6再構築エラーを修正します (2.4.0 ～ 2.4.5 は使用しないでください)。 コンポーネントのディレクトリ構造とパフォーマンスを調整し、父と子に関係のない 3 つのモードを追加します。デモデータの大まかなテストが大幅に改善されました。親と子が関連していない場合のすべての選択を最適化します。イベント addBtn は add-btn、removeBtn は、カスタム ノード スロットを追加します。左と右のシャトルを同時に 2 回選択すると消える問題を修正しました。親子非連動シャトル機能
2.3.3 シャトル一致ロジックを変更し、rootPidValue パラメータを追加します。詳細な手順については、以下のリリースノートを参照してください。
最初に npm でプラグインをダウンロードします
npm install el-tree-transfer --save
または
npm i el-tree-transfer -S
その後、通常のコンポーネントと同様に el-tree-transfer を使用できます
< template >
< div >
// 你的代码
...
// 使用树形穿梭框组件
< tree-transfer : title = " title " :from_data='fromData' :to_data='toData' :defaultProps=" { label: 'label' } " @add-btn='add' @remove-btn='remove' :mode='mode' height='540px' filter openAll>
</ tree - transfer >
< / div >
</ template >
< script >
import treeTransfer from 'el-tree-transfer' // 引入
export defult {
data ( ) {
return : {
mode : "transfer" , // transfer addressList
fromData : [
{
id : "1" ,
pid : 0 ,
label : "一级 1" ,
children : [
{
id : "1-1" ,
pid : "1" ,
label : "二级 1-1" ,
disabled : true ,
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: {
// 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
changeMode ( ) {
if ( this . mode == "transfer" ) {
this . mode = "addressList" ;
} else {
this . mode = "transfer" ;
}
} ,
// 监听穿梭框组件添加
add ( fromData , toData , obj ) {
// 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
// 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
console . log ( "fromData:" , fromData ) ;
console . log ( "toData:" , toData ) ;
console . log ( "obj:" , obj ) ;
} ,
// 监听穿梭框组件移除
remove ( fromData , toData , obj ) {
// 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
// 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
console . log ( "fromData:" , fromData ) ;
console . log ( "toData:" , toData ) ;
console . log ( "obj:" , obj ) ;
}
} ,
components : { treeTransfer } // 注册
}
</ script >
< style >
...
</ style > | シリアルナンバー | パラメータ | 説明する | タイプ | デフォルト値 | 補充する |
|---|---|---|---|---|---|
| 1 | 幅 | 幅 | 弦 | 100% | 外箱の幅と位置を設定することをお勧めします |
| 2 | 身長 | 高い | 弦 | 320ピクセル | - |
| 3 | タイトル | タイトル | 弦 | [「ソースリスト」、「ターゲットリスト」] | - |
| 4 | ボタンテキスト | ボタン名 | 配列 | - | - |
| 5 | データから | ソースデータ | 配列 | - | データ形式は element-ui ツリー コンポーネントと同じですが、id と pid が必要です。 |
| 6 | to_data | 対象データ | 配列 | - | データ形式は element-ui ツリー コンポーネントと同じですが、id と pid が必要です。 |
| 7 | デフォルトの小道具 | 設定項目 - el-tree の props と同じ | 物体 | { label: "ラベル"、children: "children"、isLeaf: "leaf"、disable: "disable" } | 使い方はel-tree propsと同じです |
| 8 | ノードキー | ノードキーの値をカスタマイズします。デフォルトは id です。 | 弦 | ID | これは、treedata データ内の id パラメータ名と一致しており、一意である必要があります。 |
| 9 | ピド | pid のパラメータ名をカスタマイズします。デフォルトは「pid」です。 | 弦 | ピド | 一部のネチズンは、背景によって指定されるフィールド名は pid と呼ばれないため、カスタム サポートが追加されると提案しました。 |
| 10 | 葉のみ | 放棄された | - | - | - |
| 11 | フィルター | フィルタリング機能を有効にするかどうか | ブール値 | 間違い | defaultPropsパラメータのlabelフィールドに基づいてフィルタリングします。 |
| 12 | すべて開く | デフォルトですべて展開するかどうか | ブール値 | 間違い | パフォーマンスに問題があります |
| 13 | カスタム ツリー ノード、使用法は element-ui ツリーと同じです | 関数 | - | バージョン 2.2.3 は、左側と右側でそれぞれカスタム ノードを定義する 2 つの関数に分割されています。 | |
| 14 | モード | シャトルボックスモードを設定する | 弦 | 移行 | モードのデフォルトは転送モード (ツリー シャトル モード) で、アドレス帳モードでは、タイトル名をカスタマイズすることはできません。 、タイトル配列の 4 つの値を渡すだけです。addressList モードでは、タイトルはデフォルトでアドレス帳、受信者、カーボン コピー者、ブラインド カーボン コピー者になります。 |
| 15 | transferOpenNode | シャトル後にシャトルノードを展開するかどうか | ブール値 | 真実 | デフォルトは true です。これは、データの量が多い場合に展開に明らかな遅延の問題が発生するため、このパラメータが追加されます。ただし、このパラメータが false に設定されている場合は注意してください。 、シャトル後は展開されません。結局のところ、それがどの層であるかを判断することはできません。膨大なデータが存在します。 |
| 16 | デフォルトチェックキー | デフォルトで選択されたノード | 配列 | 間違い | 初期のデフォルト ノードとのみ一致し、操作後にデフォルト ノードを動的に変更することはありません。 |
| 17 | プレースホルダー | 検索ボックスのプロンプトを設定する | 弦 | フィルタリングするキーワードを入力してください | - |
| 18 | デフォルト転送 | デフォルトで選択されているdefaultCheckedKeysを持つノードに自動的に1回シャトルするかどうか | ブール値 | 間違い | データを fromData と toData に分割したくないユーザーのニーズを満たすために使用されます。 |
| 19 | 配列からツリーへ | 1次元配列のツリー構造への変換を有効にするかどうか | ブール値 | 間違い | データにはルート ノードがあり、壊れていない必要があります。データ形式の詳細については、id と pid の対応関係に従って、変換時に特定のパフォーマンスの問題が発生します。 |
| 20 | アドレスオプション | アドレス帳モードの設定項目 | 物体 | {数値: 数値、接尾辞: 文字列、コネクタ: 文字列} | num-> 右側の必要なアドレス帳の数、デフォルトは 3 です。 suffix-> ラベルの後に結合するフィールド (id など)。つまり、このデータの ID を取得して後ろに結合します。 ) デフォルトは接尾辞コネクタ -> コネクタ (文字列) デフォルト - |
| 21 | 怠け者 | 遅延読み込みを有効にするかどうか | ブール値 | 間違い | この効果は el-tree 遅延ロードであり、openAll またはデフォルト拡張と同時に使用することはできません。 |
| 22 | 怠惰なFn | 遅延読み込みコールバック関数 | 関数 | - | Lazy を使用する場合、コールバック関数を渡す必要があります。例: LazyFn='loadNode'、戻りパラメータloadNode(node,solve, from)、node->現在展開されているノードnode、resolve->lazyloadingresolve、from -> left/right コールバックが左側または右側から来ていることを示します。 |
| 23 | ハイライト | 現在選択されているノードを強調表示するかどうか | ブール値 | 間違い | - |
| 24 | フィルターノード | カスタム検索機能 | 関数 | - | 渡されない場合でも、デフォルトは、defaultProps パラメータのラベル フィールドに基づいてフィルタリングされます。 |
| 25 | デフォルトのExpandedKeys | デフォルトでノードを展開する | 配列 | - | 展開されるノード ID 配列は、左側と右側で自動的に重複排除されます。 |
| 26 | 怠け者右 | バージョン 2.2.9 では、lazy 属性はツリーの左側でのみ有効になります。右側が必要な場合は、lazyloading -> LazyRight を使用します。 | ブール値 | - | - |
| 27 | sjr | アドレス帳モード、右側に宛先データを設定します | 配列 | - | - |
| 28 | CSR | アドレス帳モード、右側にカーボンコピーの人物データを設定します | 配列 | - | - |
| 29 | さん | アドレス帳モード、右側にブラインドコピー人物データを設定 | 配列 | - | - |
| 30 | rootPidValue | シャトル ボックス モード、ルート ノード データ PID の値、終了ループと一致させるために使用されます。重要 | 文字列、数値 | 0 | - |
| 31 | 厳密にチェックしてください | 父と子に血縁関係がないのかどうか | ブール値 | 間違い | このモードは遅延をサポートしていません。返される fromData と toData は最新のデータであり、obj 内のキーとノードは不完全です。また、子ノードを削除した後の親ノードの左側と右側の処理ロジックに違いがあります。承認する場合は右側に表示されるため、左側の親ノードが必要であり、承認を削除する場合は子を削除する必要があります。アクセス許可は、親のアクセス許可を削除することを意味するものではありません。 |
| 32 | renderAfterExpand | ツリー ノードが初めて展開された後に子ノードをレンダリングするかどうか | ブール値 | 真実 | - |
| 33 | ExpandOnClickNode | ノードをクリックしたときにノードを拡大するか縮小するか | ブール値 | 真実 | - |
| 34 | checkOnClickNode | ノードをクリックしたときにノードを選択するかどうか | ブール値 | 間違い | - |
| 35 | インデント | 隣接するレベル ノード間の水平方向のインデント (ピクセル単位) | 番号 | 16 | - |
| 36 | アイコンクラス | ツリーノードのアイコンをカスタマイズする | 弦 | - | - |
| 37 | ドラッグ可能 | ノードのドラッグアンドドロップ機能を有効にするかどうか | ブール値 | 間違い | - |
| 38 | ドラッグを許可する | ノードをドラッグできるかどうかを判断する | 関数(ノード) | - | - |
| 39 | ドロップを許可する | ドラッグ時にターゲットノードを配置できるかどうかを決定します | 関数(ドラッグノード、ドロップノード、タイプ) | - | type パラメータには、「prev」、「inner」、「next」の 3 つの状況があり、それぞれターゲット ノードの前に配置すること、ターゲット ノードに挿入すること、ターゲット ノードの後に配置することを意味します。 |
| 40 | checkStrictlyType | 父と子に関係のないモードには、認証モード、パペット モード、モジュラー ビルディング ブロック モードの 3 つがあります。 | 弦 | 許可: 左側で子ノードを選択すると、自動的に親ノードが表示されます。右側で親ノードを選択すると、自動的に子ノードが表示されます。このモードの両側に同じ非リーフ ノードが存在する場合があります。子シャトルは関連付けられていませんが、完全なツリーの形状構造を維持する必要があり、シャトルに必要な部分だけが自動的にスプライシングのために反対側に移動されます。スケルトン構造。同じ非リーフ ノードがこのモードの両側に存在する可能性があります。モジュラーの純粋な親子はシャトルを関連付けず、ビルディング ブロックのように、右側にツリー形状を形成する完全なツリー構造を維持しません。 、左側を分解する必要があり、左側を分解する必要があります。右側にあるほど、このパターンの左側と右側は完全な一意性を保証します。 |
| シリアルナンバー | イベント名 | 説明する | コールバックパラメータ |
|---|---|---|---|
| 1 | 追加ボタン | 追加ボタンがクリックされたときにトリガーされるイベント (2.4.0 より前の addBtn) | function(fromData,toData,obj) の場合、ツリー シャトル ボックスの転送モードは 1. 移動後の左側のデータ、2. 移動後の右側のデータ、3. 移動されたノード キー、ノード、halfKeys、halfNodes オブジェクトです。戻りパラメータは、右の受信者リスト、右のカーボン コピー リスト、および右のブラインド カーボン コピー リストです。 |
| 2 | 削除ボタン | 削除ボタンがクリックされたときにトリガーされるイベント (2.4.0 より前のremoveBtn) | function(fromData,toData,obj) の場合、ツリー シャトル ボックスの転送モードは 1. 移動後の左側のデータ、2. 移動後の右側のデータ、3. 移動されたノード キー、ノード、halfKeys、halfNodes オブジェクトです。戻りパラメータは、右の受信者リスト、右のカーボン コピー リスト、および右のブラインド カーボン コピー リストです。 |
| 3 | 左チェック変更 | 左ソースデータチェックイベント | function(nodeObj, TreeObj, checkAll) el-tree コンポーネントの check イベントの戻り値を参照してください。新しい checkAll パラメータは、すべてが選択されているかどうかを示します |
| 4 | 右チェック変更 | 右ターゲットデータチェックイベント | function(nodeObj, TreeObj, checkAll) el-tree コンポーネントの check イベントの戻り値を参照してください。新しい checkAll パラメータは、すべてが選択されているかどうかを示します |
| 5 | ノードドラッグスタート | ノードのドラッグ開始時にトリガーされるイベント | パラメータは「left」/「right」、ドラッグしたノードに対応するノード、イベントの順に合計3つあります。 |
| 6 | ノードをドラッグして入力 | 他のノードにドラッグするときにトリガーされるイベント | パラメータは「left」/「right」、ドラッグしたノードに対応するノード、入力されたノードに対応するノード、イベントの順で合計4つあります。 |
| 7 | ノードをドラッグして離れる | ノードからドラッグして離れるときにトリガーされるイベント | パラメータは「left」/「right」、ドラッグしたノードに対応するノード、左のノードに対応するノード、イベントの順で合計4つあります。 |
| 8 | ノードのドラッグオーバー | ノードがドラッグされたときにトリガーされるイベント (ブラウザーのマウスオーバー イベントと同様) | パラメータは「left」/「right」、ドラッグしたノードに対応するノード、現在入力されているノードに対応するノード、イベントの順で合計4つあります。 |
| 9 | ノードドラッグ終了 | ドラッグ終了時にトリガーされるイベント (成功しない場合があります) | パラメータは順に「left」/「right」、ドラッグしたノードに対応するノード、ドラッグ終了時に最後に入力したノード（空でも可）、ドラッグしたノードの配置位置（ドラッグする前）の合計5つです。 、後、内)、イベント |
| 10 | ノードドロップ | ドラッグが正常に完了したときにトリガーされるイベント | パラメータは順に「left」/「right」、ドラッグしたノードに対応するノード、ドラッグ終了時に最後に入力したノード、ドラッグしたノードの配置位置(前、後、内側)の合計5つです。 、 イベント |
| シリアルナンバー | 名前 | 説明する |
|---|---|---|
| 1 | クリアチェック済み | 選択したノードをクリアします。デフォルトではすべてクリアしますtype：string left左边right右边all全部默认all |
| 2 | チェックする | 選択したデータを取得する |
| 3 | セットチェック済み | 選択データの関数を設定(leftKeys = []、rightKeys = []) |
| 4 | クリアフィルター | 検索ボックスの条件をクリアし、デフォルトですべての関数をクリアします (タイプ: 文字列) left、left、right、all、default all |
| シリアルナンバー | 名前 | 説明する |
|---|---|---|
| 1 | 左フッター | シャトルボックスの左右下部スロット |
| 2 | 右フッター | シャトルボックスの左右下部スロット |
| 3 | タイトル左 | シャトル ボックスのタイトル領域の左側と右側のカスタム コンテンツ |
| 4 | タイトル権 | シャトル ボックスのタイトル領域の左側と右側のカスタム コンテンツ |
| 5 | 形状 | 左側のコンテンツ領域の上部スロット |
| 6 | に | 右側のコンテンツエリアの上部スロット |
| 7 | コンテンツ左 | 左側のツリーノードをカスタマイズする |
| 8 | コンテンツ権 | 適切なツリー ノードをカスタマイズする |
2.4.6再構築エラーを修正します (2.4.0 ～ 2.4.5 は使用しないでください)。 コンポーネントのディレクトリ構造とパフォーマンスを調整し、父と子に関係のない 3 つのモードを追加します。デモデータの大まかなテストが大幅に改善されました。親と子が関連していない場合のすべての選択を最適化します。イベント addBtn は add-btn で、removeBtn は delete-btn です。カスタム ノード スロットを追加します。左と右のシャトルを同時に 2 回選択すると消える問題を修正しました。親子非連動シャトル機能
2.3.3 シャトル ターゲットが反対側にすでに存在するかどうかを判断するアルゴリズムを変更して、元の str 正規表現の予期しない一致結果を回避します (たとえば、子フィールドとリスト フィールドの両方がこの ID を持ちます。シャトルが削除された後、子内のデータは失われ、リスト内のデータも失われます。この時点では、タスク ターゲットがすでに反対側に存在する場合、元の
rootPidValueロジックは依然としてシャトルを無視します)。ルートノードの pid を強制的に 0 に変更する必要がなくなりました。
2.3.2 アドレス帳モードの最適化
2.3.1 el-tree の外層の CSS 設定を内層に移動して、2.3.0 でスコープ指定された CSS のキャンセルの影響を排除します。
2.3.0 CSS スコープのキャンセル
バージョン 2.2.9 では、lazy 属性はツリーの左側でのみ有効になります。右側が必要な場合は、lazyloading -> LazyRight を使用します。
2.2.8 defaultCheckedKeys とdefaultTransfer の併用を最適化します。これにより、イベント追加の問題が発生します。通常、デフォルトの最初のシャトルはバックグラウンドで遅延し、フロントエンドによって 2 つのデータ fromData と toData を生成しません。このとき、defaultTransfer を使用する代わりに、パラメータが false に渡された場合は addToAims(false) 関数を再度呼び出す必要があります。引き起こされた。
2.2.6 選択したノードをクリアする
clearCheckedメソッドを追加
2.2.5 パラメータ
defaultExpandedKeysを追加してデフォルトでノードを展開します
2.2.3 カスタム ツリー ノード関数の
参数13 renderContentは、renderContentLeft,renderContentRightで、それぞれ左側と右側にカスタム ノード関数を定義し、検索をカスタマイズするためにfilterNode関数を追加します。
2.2.2 選択した強調表示パラメータを追加する
2.2.1 タイトルにすべて選択イベントを追加します。詳細なパラメーターの説明については、
事件3，事件4
2.2.0 遅延ロード機能（非アドレス帳モード）を追加しました。パラメータの詳細については、
参数21, 参数22
2.1.2 アドレス帳モードの設定項目を追加しましたが、非メインメンテナンスモードのため柔軟性がまだ低いです。パラメータの詳細な説明については、
参数20参照してください。
2.1.1 配列モードでルート ノードを選択するときのシャトル エラーを修正し、
leafOnlyパラメータを破棄し、すでにツリー構造の場合は arrayToTree パラメータを使用しないように注意してください。
2.1.0 1 次元配列を必要なツリー構造に自動的に変換する arrayTotree パラメーターを追加しました (詳細についてはパラメーター 19 または github-app.vue を参照)。シャトルが不要なノードを削除した後に半分選択されたノードが残る問題を修正しました。変数
2.0.2 タイトル ヘッダー スロットのカスタム コンテンツ領域を追加
2.0.1 親子切断の問題を修正しました。
バージョン 2.0.0 では、シャトル ボックスの左側と右側にデータ チェック イベントが追加され、シャトル ボックスの左側と右側に下部スロットが追加されました。
バージョン 1.9.8 では、カスタム ボタン
button_textのエラー報告が修正されています。
バージョン 1.9.7 では、データを fromData と toData に分割したくないユーザーのニーズを満たすために、
defaultTransfer属性が追加され、placeholder属性が追加されています。
1.9.0 ID に数字と文字の両方が含まれる場合の通常のマッチング強度を強化しました。
バージョン 1.8.9 では、ノードが一方の側がブランチ ノードであり、もう一方の側がリーフ ノードである場合にシャトルによって引き起こされる重複エラーが修正されました。ノード名をカスタマイズする際の無効なフィルター エラーを解決します。
バージョン 1.8.8 では、シャトル後にノードを展開するかどうかを管理する
transferOpenNodeパラメータが追加され、defaultCheckedKeysを使用してノードの初期デフォルト展開を設定します。
バージョン 1.8.7 では、モード フィールドを通じて設定できるアドレス帳モードが追加されています。モード フィールドのオプションの値は、
transfer|addressListです。
バージョン 1.7.7 では、
addBtnとremoveBtnイベントのパラメーターを調整し、3 つのパラメーターを返します。最初のパラメーターは移動された fromData データ、2 番目のパラメーターは移動された toData データ、3 番目のパラメーターは {keys, nodes, harfKeys, harfNodes} オブジェクトです。 。ツリー ノードのカスタマイズをサポートするためにrenderContentパラメータを追加しました。
バージョン 1.6.7 では、フィルタリングを有効にするかどうか、およびデフォルトですべてを展開するかどうかを設定する
filter,openAllパラメータが追加されました。
バージョン 1.5.9 では、ツリーの最後のリーフ ノードのみを返すかどうかを設定する
leafOnlyパラメーターが追加されました。
バージョン 1.5.8 では、以前のバージョンで理由なく削除された
nodesを返すコードが復元されます。プロジェクトにシャトル ノード キー値のみが必要な場合は、更新する必要はありません。謝罪しています。 。 。
バージョン 1.5.7 では、サブコンポーネントの非同期データが更新されない場合がある問題を修正しました。パラメータ名node_key、childrenをカスタマイズするときに、データの最初の層のpidが0に自動的に置き換えられるエラーを修正しました。
バージョン 1.4.9 では、ボタンを追加および削除するためのコールバック パラメーターが追加されています。 function(keys,nodes) の最初のパラメーターは選択したノードのノード キーの値であり、2 番目のパラメーターは選択したノード ノードです。
バージョン 1.4.8 では、ID が数値型の場合に繰り返し検証機能を通過できない問題が修正されていますが、引き続き ID に文字列型を使用することが推奨されます。
バージョン 1.4.7 では、
defaultPropsパラメータ、node_keyパラメータ、およびpidパラメータが追加されています。主な機能は、いくつかの重要なフィールド名をカスタマイズして、データの柔軟性を向上させ、フィールド名が異なるためにバックグラウンドで犠牲になることを回避することです。
バージョン 1.3.7 では、loadsh ライブラリへの依存が解消されました。以前は、このライブラリは一部のディープ コピー処理にのみ使用されていました。
パラメータ: width説明:宽度種類: String必須: falseデフォルト: 100%補足:建议在外部盒子设定宽度和位置
パラメータ: height説明:高度タイプ: String必須: falseデフォルト: 320px
パラメータ: title説明:标题タイプ: Array必須: falseデフォルト: ["源列表", "目标列表"]
パラメータ: button_text説明:按钮名字タイプ: Array必須: falseデフォルト:空
パラメータ: from_data説明:源数据型: Array必須: true補足:数据格式同element-ui tree组件，但必须有id和pid
パラメータ: to_data説明:目标数据型: Array必須: true補足:数据格式同element-ui tree组件，但必须有id和pid
パラメータ： defaultProps説明：配置项-同el-tree中props必須： false補足：用法和el-tree的props一样
パラメータ： node_key説明：自定义node-key的值，默认为id補足：必须与treedata数据内的id参数名一致，必须唯一false
パラメータ: pid説明:自定义pid的参数名，默认为"pid"必須: false補足:有网友提出后台给的字段名不叫pid，因此增加自定义支持
--(廃止) お勧めしません!パラメータ: leafOnly説明:是否只返回叶子节点タイプ: Boolean必須: false補足:默认false，如果你只需要返回的末端子节点可使用此参数
パラメータ: filter説明:是否开启筛选功能型: Boolean必須: false
パラメータ: openAll説明:是否默认展开全部: Boolean必須: false
パラメータ: renderContent説明:自定义树节点種類: 必要なFunction : false補足:用法同element-ui tree
パラメータ: mode説明:设置模式，字段可选值为transfer|addressListタイプ: String必須: false補足: mode默认为transfer模式，即树形穿梭框模式，可配置字段为addressList改为通讯录模式，通讯录模式时按钮不可自定义名字，如要自定义标题名在title数组传入四个值即可，addressList模式时标题默认为通讯录、收件人、抄送人、密送人
パラメータ: transferOpenNode説明:穿梭后是否展开穿梭的节点: Boolean必須: false補足:默认为true即展开穿梭的节点，便于视觉查看，增加此参数是因为数据量大时展开会有明显卡顿问题，但注意，如此参数设置为false则穿梭后不展开，毕竟无法确定第几层就会有庞大数据
パラメータ: defaultCheckedKeys説明:默认展开节点タイプ: Array必須: false補足:只匹配初始时默认节点，不会在你操作后动态改变默认节点
パラメータ: placeholder説明:设置搜索框提示语タイプ: String必須: false補足:默认为请输入关键词进行筛选
パラメータ: defaultTransfer説明:是否自动穿梭一次默认选中defaultCheckedKeys的节点Boolean必須: false補足:默认false，用来满足用户不想将数据拆分成fromData和toData的需求
パラメータ: arrayToTree説明:是否开启一维数组转化为树形结构型: Boolean必須: false補足:数据必须存在根节点，并且不会断节，数据格式详见github上app.vue，根据id、pid对应关系转化，存在一定的性能问题
パラメータ: addressOptions説明:通讯录模式配置项{num: Number, suffix: String, connector: String}型: Object必須: false補足: num-> 所需右侧通讯录个数,默认3 suffix-> label后想要拼接的字段（如id，即取此条数据的id拼接在后方）默认suffix connector -> 连接符（字符串）默认-
パラメータ： lazy説明：是否启用懒加载型： Boolean必須： false補足：默认false，效果动el-tree懒加载，不可和openAll或默认展开同时使用
パラメータ： lazyFn説明：懒加载的回调函数タイプ： Function必須： true補足：当适用lazy时必须传入回调函数，示例:lazyFn='loadNode',返回参数loadNode(node, resolve, from), node->当前展开节点node，resolve->懒加载resolve，from -> left|right 表示回调来自左侧|右侧
イベント: addBtn説明:点击添加按钮时触发的事件: function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据，2.移动后右侧数据，3.移动的节点keys、nodes、halfKeys、halfNodes对象；通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
イベント: removeBtn説明:点击移除按钮时触发的事件: function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据，2.移动后右侧数据，3.移动的节点keys、nodes、halfKeys、halfNodes对象；通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
イベント: left-check-change説明:左侧源数据勾选事件コールバック パラメーター: function(nodeObj, treeObj, checkall)见el-tree组件check事件返回值,新增第三个参数表示是否全部选中
イベント: right-check-change説明:右侧目标数据勾选事件コールバック パラメーター: function(nodeObj, treeObj, checkall)见el-tree组件check事件返回值，新增第三个参数表示是否全部选中
スロット: left-footer 、 right-footer説明:穿梭框左侧、右侧底部slot
スロット: title-left 、 title-right説明:穿梭框标题区左侧、右侧自定义内容
