El-Tree-Fransfer ist eine baumförmige Shuttles-Komponente, die auf Vue und Element-UI basiert. Diese Komponentenfunktion ähnelt der Übertragungskomponente von element-ui
, aber die Daten im Inneren sind eine Baumstruktur! Tatsächlich ist die Element-UI-Komponenten, von denen El-Tree-Transfer abhängt, das Kontrollkästchen Multiple-Choice, Taste und die wichtigste Baumsteuerung! Es handelt sich nicht um eine Erweiterung der Shuttle-Rahmenkomponente des Element-UI, sondern beziehen Sie sich nur auf ihren Aussehensstil und seine Funktion.
Da das Unternehmen des Unternehmens das VUE-Framework verwendet, wird das Element-UI, das in UI-Bibliotheken verwendet wird. Es ist schwierig, eine benutzerfreundliche Vue-Baum-Shuttle-Rahmenkomponente auf dem Markt zu finden und nicht andere Schwergewichts-Plug-Ins für die Einführung anderer Schwergewichts-Plugins außerhalb des Element-UI vorzustellen, sodass es El-Tree gibt -Überweisen. Leicht, einfach zu bedienen, keine Notwendigkeit, in andere Lernkosten zu investieren.
2.4.6 Die Rekonstruktionsfehler (nicht verwenden) 2.4.0-2.4.5). Algorithmus, die Demo-Daten-Testleistung, die die gesamte Auswahl optimiert hat, wenn das Ereignis nicht assoziiert wurde. Erhöhen Sie die Leere;
2.3.3 Shuttles Matching Logic; Weitere Informationen finden Sie in den Versionsanweisungen unten
Erster NPM Download Plug -in
npm install el-tree-transfer --save
oder
npm i el-tree-transfer -S
Dann können Sie El-Tree-Transfer-wie gewöhnliche Komponenten verwenden
< 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 >
Seriennummer | Parameter | veranschaulichen | Typ | Standardwert | Wieder auffüllen |
---|---|---|---|---|---|
1 | Breite | Breite | Saite | 100% | Es wird empfohlen, Breite und Position in der externen Box festzulegen |
2 | Höhe | hoch | Saite | 320px | - - |
3 | Titel | Titel | Saite | ["Quellliste", "Zielliste"] | - - |
4 | Button_text | Button -Name | Array | - - | - - |
5 | Von_data | Quelldaten | Array | - - | Das Datenformat ist die gleiche UI-Baumkomponente, aber es muss ID und PID geben |
6 | To_data | Zieldaten | Array | - - | Das Datenformat ist die gleiche UI-Baumkomponente, aber es muss ID und PID geben |
7 | DefaultProps | Konfiguration Element-Props in El-Tree | Objekt | {Label: "Label", Kinder: "Kinder", Isleaf: "Leaf", deaktivieren: "Deaktivieren"}} | Die Verwendung ist die gleiche wie die Requisiten von El-Tree |
8 | node_key | Benutzerdefinierte Knotenschlüsselwert, Standard-ID | Saite | AUSWEIS | Es muss mit dem Namen des ID -Parameters in den Treedata -Daten übereinstimmen, und es muss eindeutig sein |
9 | PID | Der Parametername der benutzerdefinierten PID, die Standard "PID" | Saite | PID | Einige Internetnutzer schlugen vor, dass der im Hintergrund angegebene Feldname keine PID ist, sodass er die benutzerdefinierte Unterstützung erhöht |
10 | blatton | Aufgeben | - - | - - | - - |
11 | Filter | Ob die Screening -Funktion einschalten soll | Boolean | FALSCH | Filtern Sie das Feld Etikett basierend auf Standardprops -Parametern |
12 | Openall | Ob Sie standardmäßig alle erweitern sollen | Boolean | FALSCH | Existenz |
13 | Benutzerdefinierter Baumknoten, Verwendung ist der gleiche UI-Baum | Funktion | - - | 2.2.3 Die Demontage wird in zwei Funktionen zerlegt. | |
14 | Modus | Stellen Sie den Shuttle -Rahmenmodus ein | Saite | Überweisen | Der MODEL -STATTIONS -MODE, dh der Baum -Shuttle -Modus. an das Adressbuch, den Empfänger, die kopierte Person und den geheimen Absender |
15 | Transferoperopennode | Ob der Shuttle -Knoten nach dem Shuttle erweitert wird | Boolean | WAHR | Der Standardknoten der Shuttles besteht darin, das Shuttle zu erweitern, was für die visuelle Anzeige bequem ist. Daten |
16 | DefaultockedKeys | Wählen Sie standardmäßig den Knoten aus | Array | FALSCH | Nur der Standardknoten ist zu Beginn abgestimmt und ändert den Standardknoten nach dem Betrieb nicht dynamisch dynamisch |
17 | Platzhalter | Setzen Sie die Eingabeaufforderung für das Suchfeld | Saite | Geben Sie Schlüsselwörter für die Filterung ein | - - |
18 | defaultTransfer | Ob der Knoten der StandardCheckedKeys automatisch standardmäßig übertragen werden soll | Boolean | FALSCH | Es wird verwendet, um die Bedürfnisse von Benutzern zu erfüllen, die Daten nicht in Fromdata und Todata teilen möchten |
19 | ArrayTotree | Ob Sie ein dimensionales Array einschalten und es in eine baumveränderte Struktur umwandeln sollen | Boolean | FALSCH | Die Daten müssen Stammknoten haben, und es werden keine Abschnitte vorhanden sein. |
20 | Adressoptionen | Konfigurationselement des Berechnungsmodus | Objekt | {Num: Nummer, Suffix: String, Connector: String} | Num-> Die Anzahl der erforderlichen Kommunikation wird aufgezeichnet, und das Feld, das nach dem Standard-3-Suffix-> Etikett (z. B. ID, dh, wird die ID dieser Daten auf der Rückseite untergebracht) Standardsuffix Connector-> Verbindung (String) Standard- |
Einundzwanzig | faul | Ob Sie faul Laden verwenden möchten | Boolean | FALSCH | El-Tree ist faul, nicht zur gleichen Zeit wie Openall oder Standard verwendet zu werden |
Zweiundzwanzig | Lazyfn | Faule Ladefunktion | Funktion | - - | Wenn Sie faul anwenden, müssen Sie die Rückruffunktion übergeben. dass der Rückruf von der linken/rechten Seite kommt |
Dreiundzwanzig | Hochlicht | Ob der aktuelle Auswahlknoten von Gao Liang | Boolean | FALSCH | - - |
vierundzwanzig | Filternde | Benutzerdefinierte Suchfunktion | Funktion | - - | Wenn Sie nicht übergeben, ist die Feldfilterung der Beschriftung nach dem Parameter DefaultProps weiterhin standardmäßig standardmäßig |
25 | DefaultExpandedKeys | Standardknoten | Array | - - | Um das Knoten -ID -Array zu erweitern, wirkt sich automatisch auf die linke und rechte Seite aus |
26 | Lazyright | 2.2.9 Version Lazy Attribut wird nur auf den linken Baum wirksam. | Boolean | - - | - - |
27 | Sjr | Adressmodus, legen Sie die richtigen Empfängerdaten fest | Array | - - | - - |
28 | CSR | Setzen Sie den Adressbuchmodus die richtige Kopie der Person rechts | Array | - - | - - |
29 | Msr | Der Adressbuchmodus sendet die rechte Sende Daten auf der rechten Seite | Array | - - | - - |
30 | rootPidValue | Der Shuttle -Rahmenmodus, der Wert des Rootknoten -Datenpids, wird zur Übereinstimmung mit der Exit -Schleife verwendet, die wichtig ist | Zeichenfolge, Nummer | 0 | - - |
31 | Überprüfung | Ist es nicht mit Vater und Sohn verwandt? | Boolean | FALSCH | Dieses Modell unterstützt Lazy nicht. Und es gibt einen Unterschied in der Verarbeitung der Logik auf der linken und rechten Seite der übergeordneten Knoten nach dem leeren Knoten. Ich möchte die Elternbehörde entfernen, um die Elternbehörde zu entfernen. |
32 | RenderAfterexpand | Rendert es seinen Sohn nach dem ersten Baumknoten? | Boolean | WAHR | - - |
33 | ExpandonClicknode | Erweitern oder schrumpfen Sie den Knoten, wenn Sie auf den Knoten klicken? | Boolean | WAHR | - - |
34 | CheckonClicknode | Wählen Sie den Knoten aus, wenn Sie auf den Knoten klicken | Boolean | FALSCH | - - |
35 | Einzug | Die horizontale Eindrücke zwischen benachbarten Knoten, das Gerät ist Pixel | Nummer | 16 | - - |
36 | Icon-Klasse | Passen Sie das Symbol des Baumknotens an | Saite | - - | - - |
37 | draggierbar | Ob die Funktion der Schleppknoten einschalten soll | Boolean | FALSCH | - - |
38 | Zulassung | Bestimmen Sie, ob der Knoten gezogen werden kann | Funktion (Knoten) | - - | - - |
39 | Zulassungsdrop | Bestimmen Sie, ob der Zielknoten beim Ziehen platziert werden kann | Funktion (Dragginode, Dropnode, Typ) | - - | Es gibt drei Arten von Typparametern: "Prev", "Inner" bzw. "Next" zeigen, dass vor dem Zielknoten, der in den Zielknoten eingefügt und hinter dem Zielknoten platziert ist |
40 | Prüfend | Drei Modi, die sich nicht mit Vater und Sohn beziehen: Autorisierungsmodus, Puppenspiel -Puppenmodus Modular Building Block -Modus | Saite | Autorisierung: Wählen Sie den übergeordneten Knoten automatisch aus, um den Sub -Node automatisch auf der rechten Seite zu bringen. Der reine Vater und der Sohn sind nicht mit Shuttle verwandt, sondern um einen kompletten Baumbaum beizubehalten. ; Der modulare reine Vater und der Sohn sind weder mit Shuttle verwandt, noch behält es eine vollständige Baumstruktur bei, wie ein Baustein zur rechten Seite, um eine Baumform zu bilden Die Seite wird benötigt, um die linke Seite zu entfernen. |
Seriennummer | Ereignisname | veranschaulichen | Rückrufparameter |
---|---|---|---|
1 | Fügen Sie-btn | Ereignis ausgelöst beim Klicken auf die Schaltfläche Hinzufügen (2.4.0 wurde zuvor hinzufügen) | Funktion (Fromdata, Todata, OBJ), der Übertragungsmodus des baumverrückten Shuttle -Boxs beträgt 1. Nach der Bewegung der linken, die rechten Daten nach dem Bewegen, 3. Die sich bewegenden Knotenschlüssel, Knoten, Halfkeys, Halfnodes -Objekte; Das Muster ist die Liste der richtigen Empfänger, die Liste rechts auf der rechten Seite, die Liste des geheimen Absenders rechts |
2 | Entfernen | Ereignis ausgelöst beim Klicken auf die Schaltfläche Entfernung (2.4.0 wurde zuvor entrimtBtn) | Funktion (Fromdata, Todata, OBJ), der Übertragungsmodus des baumverrückten Shuttle -Boxs beträgt 1. Nach der Bewegung der linken, die rechten Daten nach dem Bewegen, 3. Die sich bewegenden Knotenschlüssel, Knoten, Halfkeys, Halfnodes -Objekte; Das Muster ist die Liste der richtigen Empfänger, die Liste rechts auf der rechten Seite, die Liste des geheimen Absenders rechts |
3 | links-Check-Change | Ereignis zur Überprüfung des linken Quelldaten überprüfen | Funktion (Nodeobj, TreeObj, Checkall) Siehe EL-TREE-Komponenten-Check-Ereignisrückgabewert. Fügen Sie einen neuen Checkall-Parameter hinzu, um anzugeben, ob die gesamte Auswahl ausgewählt ist |
4 | Rechte Prüfung | Richtige Zieldaten -Überprüfungsereignis | Funktion (Nodeobj, TreeObj, Checkall) Siehe EL-TREE-Komponenten-Check-Ereignisrückgabewert. Fügen Sie einen neuen Checkall-Parameter hinzu, um anzugeben, ob die gesamte Auswahl ausgewählt ist |
5 | Node-Drag-Start | Ereignis ausgelöst, wenn der Knoten zu ziehen beginnt | Insgesamt 3 Parameter sind: "links"/"rechts", Knoten, Ereignis, das den Schleppknoten entspricht |
6 | Knoten-Drag-Inter-Interessen | Ziehen und in andere ausgelöste Knoten ziehen und ziehen | Insgesamt 4 Parameter, wiederum: "links"/"rechts", Knoten, der dem Ziehen von Knoten, Knoten, Ereignis, das den Eingangsknoten entspricht, entspricht |
7 | Node-Drag-Ebene | Abziehen von einem bestimmten Knotenereignis ausgelöst | Insgesamt 4 Parameter, wiederum: "links"/"rechts", Knoten, der dem Ziehen von Knoten, Knoten, Ereignis entspricht, das den Urlaubsknoten entspricht |
8 | Node-Drag-Over | Ereignis ausgelöst während des Drag -Knotens (ähnlich dem Mausover -Ereignis des Browsers) | Insgesamt 4 Parameter, wiederum: "links"/"rechts", den Knoten, der dem Ziehen von Knoten, Knoten und Ereignissen entspricht, die den aktuellen Eingabetoten entsprechen |
9 | Knoten-Drag-Ende | Am Ende des Widerstands (möglicherweise nicht erfolglos) ausgelöst | Insgesamt 5 Parameter, wiederum: "links"/"rechts", Knoten, der dem schleppenden Knoten entspricht, der Knoten (kann leer sein) am Ende des Ziehknotens, der Positionierungsposition des schleppenden Knotens innere |
10 | Knotendrop | Die Veranstaltung wird ausgelöst, wenn der Widerstand erfolgreich abgeschlossen ist | Insgesamt 5 Parameter, wiederum: "links"/"rechts", Knoten, der dem Zeichnungsknoten entspricht, der endgültige Eintragsknoten, wenn der Endstand der Endung der Positionierung des Ziehknotens ist |
Seriennummer | Name | veranschaulichen |
---|---|---|
1 | Confored | Löschen Sie den Auswahlknoten und entfernen Sie alle type:string left左边right右边all全部默认all |
2 | GetChecked | Ausgewählte Daten erhalten |
3 | SetChecked | Legen Sie die ausgewählte Datenfunktion fest (Leftkeys = [], Rightkeys = []) |
4 | Clearfilter | Löschen Sie die Anforderungen des Suchfelds und löschen |
Seriennummer | Name | veranschaulichen |
---|---|---|
1 | linksfuß | Schlitz auf der linken Seite des Shuttle -Rahmens und am Boden der rechten Seite |
2 | Rechtsfuß | Schlitz auf der linken Seite des Shuttle -Rahmens und am Boden der rechten Seite |
3 | Titel-links | Angeordnete Inhalte auf der linken und rechten Seite des Titelbereichs Shuttle Frame |
4 | Titelrechte | Angeordnete Inhalte auf der linken und rechten Seite des Titelbereichs Shuttle Frame |
5 | bilden | Slot im oberen Teil des Inhaltsbereichs links |
6 | Zu | Slot im oberen Teil des Inhaltsbereichs rechts |
7 | Inhaltslinks | Benutzerdefinierte linke Baumknoten |
8 | Inhaltsrechte | Benutzerdefinierter rechter Baumknoten |
2.4.6 Die Rekonstruktionsfehler (nicht verwenden) 2.4.0-2.4.5). Algorithmus, die Demo-Daten-Testleistung, die die gesamte Auswahl optimiert hat, wenn das Ereignis nicht assoziiert wurde. Erhöhen Sie die Leere;
2.3.3 Änderung, um festzustellen, ob das Shuttle -Ziel auf der gegenüberliegenden Seite vorhanden ist, um die ursprünglichen, regelmäßigen unerwarteten Übereinstimmungsergebnisse zu vermeiden (z. wird weiterhin
rootPidValue
Aufgabenziel sein, das entgegengesetzt ist und das Shuttle ignoriert);
2.3.2 Optimierter Kommunikationsaufzeichnungsmodus
2.3.1 Stellen Sie die Außenschicht auf den CSS-Einstellungen von El-Tree in die innere Schicht ein und beseitigen Sie die Auswirkungen von 2.3.0, um den Effekt des CSS-Bereichs abzubrechen
2.3.0 CSS -Absorgung abbrechen
2.2.9 Version Lazy Attribut wird nur auf den linken Baum wirksam.
2.2.8 DefaultCheckedKeys und DefaultTransfer, um das Problem des Ereignisses auszulösen. ) Funktionen manuell nach der Änderung der DefaultCheckedKeys.
2.2.6 Fügen Sie
clearChecked
hinzu, um die Knotenmethode zu löschen
2.2.5 Fügen Sie Parameter
defaultExpandedKeys
Standard hinzu, um den Knoten zu erweitern
2.2.3 Demontieren des benutzerdefinierten Baumknotenfunktion
参数13 renderContent
wirdrenderContentLeft,renderContentRight
definieren Sie die benutzerdefiniertefilterNode
auf der linken und rechten Seite.
2.2.2 Highlight -Parameter hinzufügen
2.2.1 Erhöhen Sie das vollständige Ereignis am Titel, die spezifischen Parameter veranschaulichen
事件3,事件4
2.2.0 Lazy Lazy Loading -Funktion (Nicht -Address -Buchmodus), spezifische Parameterbeschreibung Siehe
参数21, 参数22
2.1.2 Erhöhen Sie die konfigurierbaren Elemente des Adressbuchmodus, aber die Flexibilität des Wartungsmodus ohne Main ist immer noch niedrig. Siehe
参数20
für bestimmte Parameter 20
2.1.1 Beheben Sie den Array -Array -Modus aus. Wählen Sie den Stammknoten -Shuttle -Fehler aus, verlassene
leafOnly
-Parameter und beachten Sie, dass es sich bereits um eine Baumstruktur handelt. Verwenden Sie den Parameter ArrayTotree nicht
2.1.0 Erhöhen Sie den Parameter ArrayTotree und verarbeiten Sie die automatische Transformation des eindimensionalen Arrays in die erforderliche Baumstruktur (siehe Parameter 19 oder Github-App.vue). Entfernen Sie die unnötigen Variablen zum Entfernen von Teilen
2.0.2 Fügen Sie den Titelbereich des Titelkopfes des Titelkopfes hinzu
2.0.1 Beheben Sie das Problem, nicht mit Vater und Sohn verwandt zu sein.
2.0.0 Version erhöht die linke Seite des Shuttle -Rahmens und die rechten Daten rechts.
1.9.8 Beheben Sie den Fehler der benutzerdefinierten Schaltfläche
button_text
.
1.9.7 Version fügt das
defaultTransfer
-Attribut hinzu, um die Anforderungen von Benutzern zu erfüllen, die Daten nicht in Fromdata und Todata aufteilen und dasplaceholder
erhöhen.
1.9.0 Enhanced ID hat sowohl die Ziffern als auch die reguläre Matching -Stärke, wenn der Charakter charakterisiert ist.
1.8.9 Reparieren Ein Knoten ist nicht nur ein Zweig auf der einen Seite, sondern auch der doppelte Fehler, der durch die Shuttle -Knoten auf der anderen Seite verursacht wird! Lösen der ungültigen Fehler, wenn der benutzerdefinierte Knotenname gelöst wird.
1.8.8 Version fügt
transferOpenNode
hinzudefaultCheckedKeys
um zu verwalten, ob der Knoten nach der Verwaltung des Shuttle erweitert wird.
1.8.7 Version fügt den Adressbuchmodus hinzu, der im Feld Modus konfiguriert
transfer
addressList
.
1.7.7 Versionsparameter
addBtn
undremoveBtn
werden zurückgegeben, und der erste Parameter ist die Fromdata -Daten nach dem Verschieben. Erhöhen Sie den ParameterrenderContent
um die Anpassung des Baumknotens zu unterstützen.
1.6.7 Version fügt
filter,openAll
die Parameter, um festzustellen, ob das Screening geöffnet werden soll und ob
1.5.9 Version fügt
leafOnly
-Parameter hinzu, um festzustellen, ob sie am Ende des Baums zum Ende des Baumes zurückkehren soll
Die 1.5.8-Version stellt den Code wieder her,
nodes
in der vorherigen Version unerklärlicherweise gelöscht wird. Entschuldige sich. Wesen Wesen
1.5.7 Version Reparatur Sub -Component Asynchrone Daten werden manchmal nicht aktualisiert! Ein Fehler des benutzerdefinierten Parameternamens NODE_KEY, Kinder, ersetzte die PID der ersten Datenschicht automatisch auf 0
1.4.9 Version fügt einen Rückrufparameter der Zugabe- und Entfernungstaste hinzu.
1.4.8 Version behebt das Problem, dass die ID nicht der Zahlentyp ist, die wiederholte Schultestfunktion nicht übergeben kann, aber es wird weiterhin empfohlen, den String -Typ zu verwenden
Die Version 1.4.7 fügt den Parameter
defaultProps
,node_key
und denpid
-Parameter hinzu.
In der Version 1.3.7 wurde die Abhängigkeit von der Loadsh -Bibliothek abgesagt.
Parameter: width
Hinweis:宽度
Typ: String
muss ausfüllen: false
Standard: 100%
Ergänzung:建议在外部盒子设定宽度和位置
Parameter: height
Beschreibung:高度
: String
muss ausfüllen: false
Standard: 320px
Parameter: title
Beschreibung:标题
: Array
muss -Fill: false
Standard: ["源列表", "目标列表"]
Parameter: button_text
Beschreibung:按钮名字
Typ: Array
muss ausfüllen: false
Standard:空
Parameter: from_data
Beschreibung:源数据
: Array
muss ausfüllen: true
Supplement:数据格式同element-ui tree组件,但必须有id和pid
Parameter: to_data
Beschreibung:目标数据
: Array
muss ausfüllen: true
Supplement:数据格式同element-ui tree组件,但必须有id和pid
Parameter: defaultProps
Beschreibung:配置项-同el-tree中props
: false
ergänzt:用法和el-tree的props一样
Parameter: node_key
Beschreibung:自定义node-key的值,默认为id
müssen ausfüllen: false
Nahrungsergänzungsmittel:必须与treedata数据内的id参数名一致,必须唯一
Parameter: pid
Beschreibung有网友提出后台给的字段名不叫pid,因此增加自定义支持
自定义pid的参数名,默认为"pid"
muss ausgefüllt false
-(verlassen) Es wird nicht empfohlen, sie zu verwenden! Parameter: leafOnly
BESCHREIBUNG:是否只返回叶子节点
: Boolean
muss ausfüllen: false
Ergänzung:默认false,如果你只需要返回的末端子节点可使用此参数
Parameter: filter
Beschreibung:是否开启筛选功能
: Boolean
muss ausfüllen: false
Parameter: openAll
Beschreibung:是否默认展开全部
: Boolean
muss ausfüllen: false
Parameter: renderContent
Beschreibung:自定义树节点
: Function
muss gefüllt werden: false
Ergänzung:用法同element-ui tree
Parameter: mode
Beschreibung:设置模式,字段可选值为transfer|addressList
Typ: String
muss ausfüllen: false
-Nahrungsergänzungsmittel: mode默认为transfer模式,即树形穿梭框模式,可配置字段为addressList改为通讯录模式,通讯录模式时按钮不可自定义名字,如要自定义标题名在title数组传入四个值即可,addressList模式时标题默认为通讯录、收件人、抄送人、密送人
Parameter: transferOpenNode
Beschreibung:穿梭后是否展开穿梭的节点
, muss der Boolean
des false
默认为true即展开穿梭的节点,便于视觉查看,增加此参数是因为数据量大时展开会有明显卡顿问题,但注意,如此参数设置为false则穿梭后不展开,毕竟无法确定第几层就会有庞大数据
Parameter: defaultCheckedKeys
Hinweis:默认展开节点
Typ: Array
muss ausfüllen: false
Nahrungsergänzungsmittel:只匹配初始时默认节点,不会在你操作后动态改变默认节点
Parameter: placeholder
Beschreibung:设置搜索框提示语
默认为请输入关键词进行筛选
false
String
muss ausfüllen
Parameter false
defaultTransfer
beschrieben: Ob automatisch übertrifft默认false,用来满足用户不想将数据拆分成fromData和toData的需求
是否自动穿梭一次默认选中defaultCheckedKeys的节点
: Boolean
ausfüllen muss
Parameter: arrayToTree
Hinweis:是否开启一维数组转化为树形结构
: Boolean
muss ausfüllen: false
Ergänzung:数据必须存在根节点,并且不会断节,数据格式详见github上app.vue,根据id、pid对应关系转化,存在一定的性能问题
Parameter: addressOptions
Beschreibung:通讯录模式配置项{num: Number, suffix: String, connector: String}
Typ: Object
muss ausfüllen: false
-Ergänzung: num-> 所需右侧通讯录个数,默认3 suffix-> label后想要拼接的字段(如id,即取此条数据的id拼接在后方)默认suffix connector -> 连接符(字符串)默认-
Parameter: lazy
Erläuterung:是否启用懒加载
: Boolean
muss ausfüllen: false
Nahrungsergänzungsmittel:默认false,效果动el-tree懒加载,不可和openAll或默认展开同时使用
Parameter: lazyFn
Erläuterung:懒加载的回调函数
Funktionstyp: Function
muss ausfüllen: true
Supplement:当适用lazy时必须传入回调函数,示例:lazyFn='loadNode',返回参数loadNode(node, resolve, from), node->当前展开节点node,resolve->懒加载resolve,from -> left|right 表示回调来自左侧|右侧
Ereignis: addBtn
Beschreibung:点击添加按钮时触发的事件
: function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据,2.移动后右侧数据,3.移动的节点keys、nodes、halfKeys、halfNodes对象;通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
Ereignis: removeBtn
-BESCHREIBUNG:点击移除按钮时触发的事件
function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据,2.移动后右侧数据,3.移动的节点keys、nodes、halfKeys、halfNodes对象;通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
Ereignis function(nodeObj, treeObj, checkall)见el-tree组件check事件返回值,新增第三个参数表示是否全部选中
左侧源数据勾选事件
left-check-change
HINWEI function(nodeObj, treeObj, checkall)见el-tree组件check事件返回值,新增第三个参数表示是否全部选中
Ereignis: right-check-change
Beschreibung:右侧目标数据勾选事件
: function(nodeObj, treeObj, checkall)见el-tree组件check事件返回值,新增第三个参数表示是否全部选中
Slot: left-footer
, right-footer
:穿梭框左侧、右侧底部slot
Slot: title-left
, title-right
:穿梭框标题区左侧、右侧自定义内容