el-tree-transfer — это компонент шаттла дерева, основанный на VUE и element-ui. Перед его использованием убедитесь, что вы ввели element-ui! Функция этого компонента аналогична компоненту передачи element-ui
, но данные внутри имеют древовидную структуру! Фактически, компоненты element-ui, на которые опирается el-tree-transfer, — это флажок, кнопка и основной элемент управления деревом! Это не расширение компонента шаттла element-ui, а просто относится к его внешнему виду, стилю и функциональности.
Поскольку бизнес компании использует инфраструктуру Vue, библиотека пользовательского интерфейса использует element-ui. Трудно найти полезный компонент челнока для дерева Vue на рынке, и мы не хотим вводить другие тяжелые плагины за пределами element-ui только из-за челнока, поэтому есть el-tree-transfer. Легкий, простой в использовании, не требует дополнительных затрат на обучение.
2.4.6 Исправьте ошибку реконструкции (пожалуйста, не используйте версии 2.4.0-2.4.5); добавьте три режима, не связанных с отцом и сыном (включая режим авторизации); восстановите структуру каталогов компонентов и производительность; грубый тест демонстрационных данных значительно улучшен; Оптимизация выбора всех, когда родительский и дочерний элементы не связаны; Событие addBtn — это add-btn, а RemoveBtn — это удаление-btn; добавление пользовательского слота узла; исправление исчезновения данных после одновременного выбора левого и правого шатуна; добавление очистки в поле поиска; несвязанная челночная функция родитель-потомок
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 | button_text | название кнопки | Множество | - | - |
5 | from_data | исходные данные | Множество | - | Формат данных такой же, как у компонента дерева element-ui, но должен иметь идентификатор и pid. |
6 | to_data | целевые данные | Множество | - | Формат данных такой же, как у компонента дерева element-ui, но должен иметь идентификатор и pid. |
7 | defaultProps | Элементы конфигурации — такие же, как реквизиты в el-tree. | Объект | { метка: «метка», дети: «дети», isLeaf: «лист», отключить: «отключить» } | Использование такое же, как и реквизит el-tree. |
8 | ключ_узла | Настройте значение ключа узла, по умолчанию — id. | Нить | ИДЕНТИФИКАТОР | Оно должно соответствовать имени параметра id в данных дерева и быть уникальным. |
9 | pid | Настройте имя параметра pid, по умолчанию — «pid». | Нить | pid | Некоторые пользователи сети предположили, что имя поля, заданное фоном, не называется pid, поэтому добавлена настраиваемая поддержка. |
10 | листТолько | заброшенный | - | - | - |
11 | фильтр | Включить ли функцию фильтрации | логическое значение | ЛОЖЬ | Фильтр на основе поля метки параметра defaultProps. |
12 | открыть все | Развернуть ли все по умолчанию | логическое значение | ЛОЖЬ | Есть проблема с производительностью |
13 | Пользовательский узел дерева, использование такое же, как и дерево element-ui. | Функция | - | Версия 2.2.3 разделена на две функции для определения пользовательских узлов слева и справа соответственно. | |
14 | режим | Установите режим челночного ящика | Нить | передача | По умолчанию используется режим передачи, который является режимом просмотра дерева. Настраиваемым полем является адресСписок, и его можно изменить на режим адресной книги. В режиме адресной книги имя кнопки нельзя настроить. Если вы хотите настроить имя заголовка. , просто передайте четыре значения в массиве title. В режиме AddressList заголовок по умолчанию — адресная книга, получатель, копия и копия. |
15 | передачаOpenNode | Расширять ли шаттловые узлы после шаттла | логическое значение | истинный | Значение по умолчанию — true, что означает, что челночный узел будет расширен для визуального осмотра. Этот параметр добавлен, поскольку при большом объеме данных будут очевидны проблемы с задержкой. Однако обратите внимание, что если для этого параметра установлено значение false. , после шаттла он не будет расширен, ведь невозможно определить, какой это слой. Там будут огромные данные. |
16 | по умолчаниюCheckedKeys | Узел выбран по умолчанию | Множество | ЛОЖЬ | Соответствует только исходному узлу по умолчанию и не будет динамически изменять узел по умолчанию после того, как вы с ним работаете. |
17 | заполнитель | Установите подсказки в окне поиска | Нить | Введите ключевые слова для фильтрации | - |
18 | по умолчаниюПеренос | Следует ли автоматически перемещаться один раз к узлу с выбранным по умолчанию defaultCheckedKeys | логическое значение | ЛОЖЬ | Используется для удовлетворения потребностей пользователей, которые не хотят разбивать данные на fromData и toData. |
19 | массивToTree | Включить ли преобразование одномерных массивов в древовидные структуры | логическое значение | ЛОЖЬ | Данные должны иметь корневой узел и не быть поврежденными. Подробную информацию о формате данных см. в файле app.vue на github. Согласно соответствующей взаимосвязи между id и pid, при преобразовании возникают определенные проблемы с производительностью. |
20 | Параметры адреса | Элементы конфигурации режима адресной книги | Объект | {номер: номер, суффикс: строка, соединитель: строка} | num->Количество необходимых адресных книг справа, по умолчанию 3 суффикс->Поле, которое вы хотите склеить после метки (например, id, то есть взять id этих данных и склеить сзади ). По умолчанию используется суффикс соединитель -> соединитель (строка) по умолчанию-. |
двадцать один | ленивый | Включить ли отложенную загрузку | логическое значение | ЛОЖЬ | Эффект представляет собой отложенную загрузку el-tree и не может использоваться одновременно с openAll или расширением по умолчанию. |
двадцать два | ленивыйFn | Функция обратного вызова отложенной загрузки | Функция | - | При использовании lazy необходимо передать функцию обратного вызова, например: lazyFn='loadNode', возвращаемый параметр loadNode(node,solve, from), node->текущий расширенный узел node,solve->lazy loading, from -> влево/вправо Указывает, что обратный вызов поступает с левой/правой стороны. |
двадцать три | выделять | Следует ли выделять текущий выбранный узел | логическое значение | ЛОЖЬ | - |
двадцать четыре | фильтрузел | Пользовательская функция поиска | Функция | - | Если он не передан, значение по умолчанию все равно будет фильтроваться на основе поля метки параметра defaultProps. |
25 | по умолчаниюExpandedKeys | Развернуть узлы по умолчанию | Множество | - | Массив идентификаторов узлов, который будет расширен, будет автоматически дедуплицирован с левой и правой стороны. |
26 | ленивыйПравда | В версии 2.2.9 атрибут lazy действует только на левой стороне дерева. Если вам нужна правая часть, используйте отложенную загрузку -> lazyRight. | логическое значение | - | - |
27 | старший | Режим адресной книги, справа задайте данные получателя | Множество | - | - |
28 | КСО | Режим адресной книги, справа установите копию данных человека. | Множество | - | - |
29 | мср | Режим адресной книги, установите скрытую копию данных человека справа | Множество | - | - |
30 | rootPidValue | Режим челнока, значение pid данных корневого узла, используемое для соответствия выходному циклу, важно | Строка, Число | 0 | - |
31 | checkСтрого | Являются ли отец и сын не родственниками | логическое значение | ЛОЖЬ | Этот режим не поддерживает отложенный доступ. Возвращаемые данные fromData и toData являются последними данными, а ключи и узлы в obj являются неполными. И есть различия в логике обработки левой и правой сторон родительского узла после удаления дочернего узла: поскольку при авторизации он появится справа, то должен быть обязателен левый родительский узел, а при удалении авторизации удаление дочернего узла разрешения не означают, что вы хотите удалить родительские разрешения. |
32 | рендерАфтерРазвернуть | Следует ли отображать дочерние узлы после первого расширения узла дерева. | логическое значение | истинный | - |
33 | развернутьOnClickNode | Расширять или сжимать узлы при нажатии на них | логическое значение | истинный | - |
34 | чеконкликноде | Следует ли выбирать узел при нажатии на него | логическое значение | ЛОЖЬ | - |
35 | отступ | Горизонтальный отступ между соседними узлами уровня, в пикселях | Число | 16 | - |
36 | класс значков | Настройка значков для узлов дерева | Нить | - | - |
37 | перетаскиваемый | Включить ли функцию перетаскивания узла | логическое значение | ЛОЖЬ | - |
38 | разрешить перетаскивание | Определите, можно ли перетаскивать узел | Функция(узел) | - | - |
39 | разрешить сброс | Определите, можно ли разместить целевой узел при перетаскивании | Функция (перетаскиваниеNode, dropNode, тип) | - | Параметр типа имеет три ситуации: «предыдущая», «внутренняя» и «следующая», что соответственно означает размещение перед целевым узлом, вставку в целевой узел и размещение после целевого узла. |
40 | checkStrictlyType | Есть три режима, не связанных с отцом и сыном: режим авторизации, режим марионетки и режим модульного строительного блока. | Нить | авторизация: выбор дочернего узла слева автоматически приведет к появлению родительского узла; выбор родительского узла справа автоматически приведет к дочернему узлу; один и тот же нелистовой узел может существовать по обе стороны этого режима: Чистый родительский узел; дочерний челнок не связан, но все дерево должно сохранять структуру формы, при этом автоматически переносятся только необходимые части челнока на противоположную сторону для сращивания. Скелетная структура; одни и те же нелистовые узлы могут существовать по обе стороны этого режима; модульный чистый родительско-дочерний элемент не связывает шаттл и не поддерживает полную древовидную структуру, как строительные блоки, для формирования древовидной формы с правой стороны. , необходимо разобрать левую часть, а чем больше правая часть, тем более полной является древовидная структура, левая и правая части этого шаблона обеспечивают строгую уникальность; |
серийный номер | название события | иллюстрировать | параметры обратного вызова |
---|---|---|---|
1 | добавить кнопку | Событие срабатывает при нажатии кнопки добавления (addBtn до версии 2.4.0) | function(fromData,toData,obj), режимы передачи дерева шаттла: 1. Левые данные после перемещения, 2. Правые данные после перемещения, 3. Перемещенные ключи узла, узлы, объекты HalfKeys, HalfNodes адресной книги. Возвращаемые параметры — это правильный список получателей, правильный список точных копий и правый список скрытых копий. |
2 | кнопка удаления | Событие срабатывает при нажатии кнопки удаления (removeBtn до версии 2.4.0) | function(fromData,toData,obj), режимы передачи дерева шаттла: 1. Левые данные после перемещения, 2. Правые данные после перемещения, 3. Перемещенные ключи узла, узлы, объекты HalfKeys, HalfNodes адресной книги. Возвращаемые параметры — это правильный список получателей, правильный список точных копий и правый список скрытых копий. |
3 | левая проверка-изменение | Оставлено событие проверки исходных данных | function(nodeObj,treeObj,checkAll) видит возвращаемое значение события проверки компонента el-tree, новый параметр checkAll указывает, выбраны ли все |
4 | вправо-проверить-изменить | Событие проверки правых целевых данных | function(nodeObj,treeObj,checkAll) видит возвращаемое значение события проверки компонента el-tree, новый параметр checkAll указывает, выбраны ли все |
5 | начало перетаскивания узла | Событие срабатывает, когда узел начинает перетаскиваться | Всего имеется 3 параметра по порядку: «влево»/«вправо», Узел, соответствующий перетаскиваемому узлу, и событие. |
6 | узел-перетаскивание-ввод | События, возникающие при перетаскивании на другие узлы | Всего имеется 4 параметра по порядку: «левый»/«правый», Узел, соответствующий перетаскиваемому узлу, Узел, соответствующий введенному узлу, и событие. |
7 | узел-перетаскивание-оставить | Событие срабатывает при перетаскивании от узла | Всего существует 4 параметра по порядку: «левый»/«правый», Узел, соответствующий перетаскиваемому узлу, Узел, соответствующий левому узлу, и событие. |
8 | перетаскивание узла | Событие, инициируемое при перетаскивании узла (аналогично событию наведения курсора мыши в браузере). | Всего существует 4 параметра по порядку: «влево»/«вправо», Узел, соответствующий перетаскиваемому узлу, Узел, соответствующий текущему введенному узлу, и событие. |
9 | конец перетаскивания узла | Событие, инициируемое при завершении перетаскивания (может быть неуспешным) | Всего имеется 5 параметров в порядке: «слева»/«справа», Узел, соответствующий перетаскиваемому узлу, последний узел, введенный после окончания перетаскивания (может быть пустым), позиция размещения перетаскиваемого узла (перед , после, внутри), событие |
10 | удаление узла | Событие срабатывает при успешном завершении перетаскивания | Всего существует 5 параметров по порядку: «слева»/«справа», узел, соответствующий перетаскиваемому узлу, последний узел, введенный после окончания перетаскивания, позиция размещения перетаскиваемого узла (до, после, внутри). , событие |
серийный номер | имя | иллюстрировать |
---|---|---|
1 | ОчиститьПроверено | Очистить выбранный узел, очистить все. type:string left左边right右边all全部默认all |
2 | getChecked | Получить выбранные данные |
3 | setChecked | Установить выбранную функцию данных (leftKeys = [], rightKeys = []) |
4 | ОчиститьФильтр | Очистить условия окна поиска, очистить все функции по умолчанию (тип: строка) влево, влево, вправо, все, все по умолчанию |
серийный номер | имя | иллюстрировать |
---|---|---|
1 | левый нижний колонтитул | Левый и правый нижние слоты челночной коробки. |
2 | правый нижний колонтитул | Левый и правый нижние слоты челночной коробки. |
3 | заголовок слева | Пользовательский контент слева и справа от области заголовка окна шаттла. |
4 | право собственности | Пользовательский контент слева и справа от области заголовка окна шаттла. |
5 | форма | Верхний слот левой области содержимого |
6 | к | Верхний слот области содержимого справа |
7 | содержание слева | Настроить левый узел дерева |
8 | право на содержание | Настройте правильный узел дерева |
2.4.6 Исправьте ошибку реконструкции (пожалуйста, не используйте версии 2.4.0-2.4.5); добавьте три режима, не связанных с отцом и сыном (включая режим авторизации); восстановите структуру каталогов компонентов и производительность; грубый тест демонстрационных данных значительно улучшен; Оптимизация выбора всех, когда родительский и дочерний элементы не связаны; Событие addBtn — это add-btn, а RemoveBtn — это удаление-btn; добавление пользовательского слота узла; исправление исчезновения данных после одновременного выбора левого и правого шатуна; добавление очистки в поле поиска; несвязанная челночная функция родитель-потомок
2.3.3 Измените алгоритм определения того, существует ли уже цель шаттла на противоположной стороне, чтобы избежать неожиданных результатов сопоставления исходного регулярного выражения str (например, и дочерние поля, и поля списка имеют этот идентификатор. После удаления шаттла данные в дочерних элементах исчезли, а данные в списке исчезли. Данные все еще существуют, в это время исходная логика сопоставления по-прежнему будет игнорировать шаттл, когда цель задачи уже существует на противоположной стороне, и добавьте поле
rootPidValue
); больше не принудительно меняйте pid корневого узла на 0
2.3.2 Оптимизация режима адресной книги
2.3.1 Переместите настройки CSS внешнего слоя для el-tree во внутренний слой, чтобы устранить влияние отмены области действия CSS в версии 2.3.0.
2.3.0 Отмена области CSS
В версии 2.2.9 атрибут lazy действует только на левой стороне дерева. Если вам нужна правая часть, используйте отложенную загрузку -> lazyRight.
2.2.8 Оптимизируйте совместное использование defaultCheckedKeys и defaultTransfer, что вызывает проблему добавления событий. Обычно первый шаттл по умолчанию заключается в том, что фоновый процесс ленив и не генерирует два данных fromData и toData. Его необходимо разделить с помощью внешнего интерфейса. В это время необходимо снова вызвать событие добавления; Альтернативно, вместо использования defaultTransfer, вы можете вручную вызвать функцию addToAims(false) после изменения defaultCheckedKeys. Если параметру присвоено значение false, обратный вызов Emit не будет. сработало.
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 Добавлен параметр arrayTotree для автоматического преобразования одномерного массива в требуемую древовидную структуру (подробности см. в параметре 19 или в github-app.vue), исправлена проблема с оставшимися наполовину выбранными узлами после удаления некоторых ненужных узлов; переменные
2.0.2 Добавление области пользовательского контента в слот заголовка заголовка
2.0.1 Исправлена проблема разъединения родитель-потомок.
Версия 2.0.0 добавляет события проверки данных на левой и правой сторонах челнока, а также нижние слоты на левой и правой сторонах челнока.
Версия 1.9.8 исправляет сообщение об ошибке пользовательской кнопки
button_text
.
Версия 1.9.7 добавляет атрибут
defaultTransfer
для удовлетворения потребностей пользователей, которые не хотят разделять данные на fromData и toData, а также добавляет атрибутplaceholder
.
1.9.0. Увеличьте надежность обычного соответствия, если идентификатор содержит как цифры, так и символы.
Версия 1.8.9 исправляет ошибку дублирования, вызванную шаттлом, когда узел является одновременно узлом-ветвью с одной стороны и конечным узлом с другой стороны! Устраните ошибку недопустимого фильтра при настройке имен узлов.
В версии 1.8.8 добавлен параметр
transferOpenNode
, позволяющий управлять необходимостью расширения узлов после шаттла, аdefaultCheckedKeys
используется для установки начального расширения узлов по умолчанию.
В версии 1.8.7 добавлен режим адресной книги, который можно настроить с помощью поля режима. Необязательное значение поля режима —
transfer
|addressList
.
Версия 1.7.7 корректирует параметры событий
addBtn
иremoveBtn
, возвращая три параметра: первый параметр — это перемещенные данные fromData, второй параметр — это перемещенные данные toData, а третий параметр — объект {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 добавляет параметры обратного вызова для добавления и удаления кнопок. Первый параметр функции (ключи, узлы) — это значение ключа узла выбранного узла, а второй параметр — выбранный узел узла.
Версия 1.4.8 устраняет проблему, заключающуюся в том, что идентификатор не может пройти функцию повторной проверки, если он имеет номер типа, но по-прежнему рекомендуется использовать строковый тип для идентификатора.
В версии 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
: false
Дополнение:必须与treedata数据内的id参数名一致,必须唯一
Параметры: 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
Описание:穿梭框标题区左侧、右侧自定义内容