Компонент Tree Shuttle на основе vue и element-ui

Vue.js

#el-tree-transfer

Компонент челнока в форме дерева для платформы vue также может использоваться для компонента почтовой адресной книги.

##Введение · Сначала прочтите документацию и примечания к выпуску

Поскольку бизнес компании использует фреймворк vue, библиотека пользовательского интерфейса использует element-ui. Трудно найти на рынке полезный компонент Vue Tree Shuttle, и я не хочу вводить другие тяжеловесные плагины только потому, что ящик челнока находится за пределами element-ui, поэтому существует el-tree-transfer. Легкий, простой в использовании, не требует дополнительных затрат на обучение.

el-tree-transfer — это компонент кадра шаттла по дереву, основанный на VUE и element-ui. Перед использованием убедитесь, что element-ui введен! Функция этого компонента аналогична компоненту передачи element-ui, но данные внутри представляют собой древовидную структуру! На самом деле компоненты element-ui, от которых зависит el-tree-transfer, — это флажок Checkbox, кнопка Button и самый важный элемент управления Tree! Это не расширение компонента челночного ящика element-ui, а только относится к его внешнему виду и функциям. Пользовательский интерфейс полностью выполнен в стиле element-ui. Примечание. По умолчанию при использовании этого плагина вы ввели кнопку, флажок и древовидные компоненты element-ui!версия vuecli3

онлайн-доступ - GitHub - NPM - SegmentFault - CSDN- Наггетс

Уведомление! Версия 2.2.0 добавляет функцию ленивой загрузки

Уведомление! В версии 2.0.0 есть ошибка разъединения parent-child, в версии 2.1.1 добавлена ​​поддержка arrayToTree, но если данные уже являются деревом, пожалуйста, не используйте этот параметр.

Уведомление! Версия 1.9.0 повышает точность совпадения идентификатора как числа, а версия 1.9.7 увеличиваетdefaultTransferАтрибуты используются для удовлетворения потребностей пользователей, которые не хотят разбивать данные на fromData и toData.

Уведомление! Версия 1.8.9 исправляет дублирующую ошибку, вызванную шаттлом, когда узел одновременно является узлом-ветвью с одной стороны и конечным узлом с другой стороны! Отфильтровать недопустимую ошибку при разрешении имен пользовательских узлов

Уведомление! Версия 1.8.7 добавляет режим адресной книги, который можно настроить через поле режима.

Уведомление! В версии 1.7.7 настраиваются параметры события перемещения, и напрямую возвращаются перемещенные данные fromData и toData.

Уведомление! Версия 1.5 и выше изменена на автоматическую обработку

Пожалуйста, установите pid первого слоя данных равным 0! ! В качестве идентификатора рекомендуется использовать строку, но это также может быть число. Пожалуйста, не смешивайте их. Идентификатор не может повторяться!

##Начать

Сначала npm загрузите плагин

npm install el-tree-transfer --save

или

npm i el-tree-transfer -S

Затем вы можете использовать el-tree-transfer как обычный компонент.

Адрес демо-кода GitHub добро пожаловать, звездочка, спасибо

<template>
    <div>
    // 你的代码
    ...
    // 使用树形穿梭框组件
    <tree-transfer :title="title" :from_data='fromData' :to_data='toData' :defaultProps="{label:'label'}"             @addBtn='add' @removeBtn='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",
                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);
      }
    },
    comporents:{ treeTransfer } // 注册
  }

</script>


<style>
...
</style>

Документация

серийный номер параметр иллюстрировать Типы Необходимый необязательное значение По умолчанию Пополнить
1 width ширина String false - 100% Рекомендуется задавать ширину и положение во внешнем поле.
2 height высоко String false - 320px -
3 title заглавие String false - ["исходный список", "целевой список"] -
4 button_text название кнопки Array false - - -
5 from_data источник данных Array true - - Формат данных такой же, как у компонента дерева element-ui, но должен иметь идентификатор и pid.
6 to_data целевые данные Array true - - Формат данных такой же, как у компонента дерева element-ui, но должен иметь идентификатор и pid.
7 defaultProps Элемент конфигурации - такой же, как реквизит в el-tree Object false - { label: "label", children: "children", isLeaf: "leaf", disable: "disable" } Использование такое же, как реквизит el-tree
8 node_key Настройте значение ключа узла, по умолчанию это id String false - id Должно совпадать с именем параметра id в данных дерева, должно быть уникальным.
9 pid Имя параметра пользовательского pid, по умолчанию "pid" String false - pid Некоторые пользователи сети предположили, что имя поля, заданное фоном, не называется pid, поэтому добавьте пользовательскую поддержку
10 leafOnly заброшенный - - - - -
11 filter Включить ли фильтрацию Boolean false - false Фильтровать по полю метки параметра defaultProps
12 openAll Раскрывать ли все по умолчанию Boolean false - false Есть проблемы с производительностью
13 renderContent renderContentLeft, renderContentRight Пользовательский узел дерева, использование аналогично дереву element-ui. Function false - - Версия 2.2.3 разделена на две функции для определения пользовательских узлов слева и справа соответственно.
14 mode Установить режим челночного ящика String false transfer/addressList transfer Режим по умолчанию — режим передачи, т. е. режим челнока в форме дерева. Настраиваемое поле — это addressList, который следует изменить на режим адресной книги. В режиме адресной книги нельзя настроить кнопку с именем. Если вы хотите настроить имя заголовка, вы можете передать четыре значения в массиве заголовков. , в режиме списка адресов заголовок по умолчанию: адресная книга, получатель, копия, скрытая копия
15 transferOpenNode Расширять ли узел челнока после челнока Boolean false - true Значение по умолчанию — true, что означает расширение узла челнока, что удобно для визуального осмотра.Этот параметр увеличен, поскольку расширение вызовет очевидные проблемы при большом объеме данных.Однако обратите внимание, что если для этого параметра установлено значение false, после шаттла не расширится.Ведь нельзя определить количество слоев.будут огромные данные
16 defaultCheckedKeys Узел выбран по умолчанию Array false - - Соответствует только начальному узлу по умолчанию, не будет динамически изменять узел по умолчанию после вашей операции.
17 placeholder Установите подсказку окна поиска String false - Введите ключевые слова для фильтрации -
18 defaultTransfer Следует ли автоматически перемещать узел с параметром defaultCheckedKeys, выбранным по умолчанию. Boolean false - false Используется для удовлетворения потребностей пользователей, которые не хотят разбивать данные на fromData и toData
19 arrayToTree Включить ли преобразование одномерных массивов в древовидные структуры Boolean false - false Данные должны существовать в корневом узле и не будут нарушены.Формат данных см. в app.vue на github.Согласно соответствующей взаимосвязи между идентификатором и pid, существуют определенные проблемы с производительностью.
20 addressOptions Элементы конфигурации режима адресной книги Object false - {num: Number, suffix: String, connector: String} num->нужное количество адресных книг справа, по умолчанию 3 суффикса->поле, которое нужно склеить после метки (типа id, то есть взять id этого куска данных и склеить его сзади) суффикс по умолчанию коннектор -> коннектор (строка) по умолчанию-
21 lazy Включить ли ленивую загрузку Boolean false - false Эффект лениво загружается el-tree и не может использоваться с расширением openAll или по умолчанию.
22 lazyFn Функция обратного вызова с ленивой загрузкой Function true - - При применении ленивой функции необходимо передать функцию обратного вызова, например: lazyFn='loadNode', возвращаемые параметры loadNode(node, resolve, from), node->текущий расширенный узел node, resolve->lazy load resolve, from - > влево/вправо Указывает, что обратный вызов исходит слева/справа.
23 high-light Подсвечивать ли текущий выбранный узел Boolean false - false -
24 filterNode функция пользовательского поиска Function false - - Если не пройти, он все равно будет отфильтрован в соответствии с полем метки параметра defaultProps по умолчанию.
серийный номер название события иллюстрировать параметр обратного вызова
1 addBtn Событие срабатывает при нажатии кнопки добавления unction(fromData, toData, obj), режим передачи древовидного челнока: 1. Левые данные после перемещения, 2. Правые данные после перемещения, 3. Перемещенные ключи узлов, узлы, объекты halfKeys, halfNodes, список адресов addressList В режиме , возвращаемые параметры — это список получателей справа, список копий справа и список скрытых копий справа.
2 removeBtn Событие срабатывает при нажатии кнопки удаления function(fromData, toData, obj), режимы передачи древовидного челнока: 1. Левые данные после перемещения, 2. Правые данные после перемещения, 3. Перемещенные ключи узлов, узлы, объекты halfKeys, halfNodes, список адресов addressList В режиме , возвращаемые параметры — это список получателей справа, список копий справа и список скрытых копий справа.
3 left-check-change Событие проверки исходных данных слева function(nodeObj, treeObj, checkAll) видят возвращаемое значение события проверки компонента el-tree, а новый параметр checkAll указывает, все ли выбраны
4 right-check-change Событие проверки правильных целевых данных function(nodeObj, treeObj, checkAll) видят возвращаемое значение события проверки компонента el-tree, а новый параметр checkAll указывает, все ли выбраны
серийный номер имя иллюстрировать
1 left-footer Левая и правая нижние прорези коробки челнока
2 right-footer Левая и правая нижние прорези коробки челнока
3 title-left Пользовательский контент слева и справа от области заголовка окна челнока
4 title-right Пользовательский контент слева и справа от области заголовка окна челнока

Выходные данные

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.7defaultTransferАтрибуты используются для удовлетворения потребностей пользователей, которые не хотят разбивать данные на fromData и toData, увеличиватьplaceholderАтрибуты.

1.9.0 Увеличена сила регулярного сопоставления, когда идентификатор содержит как цифры, так и символы.

Версия 1.8.9 исправляет дублирующую ошибку, вызванную шаттлом, когда узел одновременно является узлом-ветвью с одной стороны и конечным узлом с другой стороны! Отфильтровать недопустимую ошибку при разрешении имен пользовательских узлов.

Добавлено в версии 1.8.8transferOpenNodeПараметр используется для управления расширением узла после челнока,defaultCheckedKeysИспользуется для установки начального узла расширения по умолчанию.

В версии 1.8.7 добавлен режим адресной книги.Режим можно настроить через поле режима.Необязательным значением поля режима являетсяtransfer|addressList.

Версия 1.7.7addBtnа такжеremoveBtnНастройка параметра события возвращает три параметра, первый параметр — это данные процесса перемещения, второй параметр — данные перемещения данных Todata, третий параметр — объекты {Keys, Nodes, Harfkeys, Harfnodes}. УвеличиватьrenderContentПараметры поддерживают узел дерева Custom.

Добавлено в версии 1.6.7filter,openAllПараметры, чтобы указать, включать ли фильтрацию и раскрывать ли все по умолчанию

Добавлено в версии 1.5.9leafOnlyпараметр, чтобы установить, возвращать ли только конечные листовые узлы дерева

Версия 1.5.8 восстанавливает возврат, который был необъяснимо удален в предыдущей версии.nodesКод, если вашему проекту требуется только значение ключа узла шаттла, обновлять его не нужно! извиняюсь. . .

В версии 1.5.7 исправлена ​​проблема, из-за которой асинхронные данные подкомпонентов иногда не обновлялись! Исправлена ​​ошибка при настройке имен параметров node_key, children, автоматически заменяющая pid первого слоя данных на 0

В версии 1.4.9 добавлены параметры обратного вызова для добавления и удаления кнопок.Первый параметр function(keys,nodes) — значение node-key выбранного узла, а второй параметр — выбранный узел node.

В версии 1.4.8 исправлена ​​проблема, из-за которой функция проверки дубликатов не может быть передана, когда идентификатор имеет числовой тип, но по-прежнему рекомендуется использовать строковый тип для идентификатора.

Добавлена ​​версия 1.4.7defaultPropsпараметр,node_keyпараметр,pidПараметры, основная функция состоит в том, чтобы настроить некоторые важные имена полей, чтобы повысить гибкость данных и избежать принесения в жертву небу из-за разных имен полей в фоновом режиме.

Версия 1.3.7 отменяет зависимость от библиотеки loadsh, которая раньше использовалась только для некоторой глубокой обработки копирования.

Устаревшая документация

  1. параметр:widthпроиллюстрировать:宽度Типы:StringНеобходимый:falseПо умолчанию:100%Пополнить:建议在外部盒子设定宽度和位置

  2. параметр:heightпроиллюстрировать:高度Типы:StringНеобходимый:falseПо умолчанию:320px

  3. параметр:titleпроиллюстрировать:标题Типы:ArrayНеобходимый:falseПо умолчанию:["源列表", "目标列表"]

  4. параметр:button_textпроиллюстрировать:按钮名字Типы:ArrayНеобходимый:falseПо умолчанию:空

  5. параметр:from_dataпроиллюстрировать:源数据Типы:ArrayНеобходимый:trueПополнить:数据格式同element-ui tree组件，但必须有id和pid

  6. параметр:to_dataпроиллюстрировать:目标数据Типы:ArrayНеобходимый:trueПополнить:数据格式同element-ui tree组件，但必须有id和pid

  7. параметр:defaultPropsпроиллюстрировать:配置项-同el-tree中propsНеобходимый:falseПополнить:用法和el-tree的props一样

  8. параметр:node_keyпроиллюстрировать:自定义node-key的值，默认为idНеобходимый:falseПополнить:必须与treedata数据内的id参数名一致，必须唯一

  9. параметр:pidпроиллюстрировать:自定义pid的参数名，默认为"pid"Необходимый:falseПополнить:有网友提出后台给的字段名不叫pid，因此增加自定义支持

  10. параметр:leafOnlyпроиллюстрировать:是否只返回叶子节点Типы:BooleanНеобходимый:falseПополнить:默认false，如果你只需要返回的末端子节点可使用此参数

  11. параметр:filterпроиллюстрировать:是否开启筛选功能Типы:BooleanНеобходимый:false

  12. параметр:openAllпроиллюстрировать:是否默认展开全部Типы:BooleanНеобходимый:false

  13. параметр:renderContentпроиллюстрировать:自定义树节点Типы:FunctionНеобходимый:falseПополнить:用法同element-ui tree

  14. параметр:modeпроиллюстрировать:设置模式，字段可选值为transfer|addressListТипы:StringНеобходимый:falseПополнить:mode默认为transfer模式，即树形穿梭框模式，可配置字段为addressList改为通讯录模式，通讯录模式时按钮不可自定义名字，如要自定义标题名在title数组传入四个值即可，addressList模式时标题默认为通讯录、收件人、抄送人、密送人

  15. параметр:transferOpenNodeпроиллюстрировать:穿梭后是否展开穿梭的节点Типы:BooleanНеобходимый:falseПополнить:默认为true即展开穿梭的节点，便于视觉查看，增加此参数是因为数据量大时展开会有明显卡顿问题，但注意，如此参数设置为false则穿梭后不展开，毕竟无法确定第几层就会有庞大数据

  16. параметр:defaultCheckedKeysпроиллюстрировать:默认展开节点Типы:ArrayНеобходимый:falseПополнить:只匹配初始时默认节点，不会在你操作后动态改变默认节点

  17. параметр:placeholderпроиллюстрировать:设置搜索框提示语Типы:StringНеобходимый:falseПополнить:默认为请输入关键词进行筛选

  18. параметр:defaultTransferпроиллюстрировать:是否自动穿梭一次默认选中defaultCheckedKeys的节点Типы:BooleanНеобходимый:falseПополнить:默认false，用来满足用户不想将数据拆分成fromData和toData的需求

  19. параметр:arrayToTreeпроиллюстрировать:是否开启一维数组转化为树形结构Типы:BooleanНеобходимый:falseПополнить:数据必须存在根节点，并且不会断节，数据格式详见github上app.vue，根据id、pid对应关系转化，存在一定的性能问题

  20. параметр:addressOptionsпроиллюстрировать:通讯录模式配置项{num: Number, suffix: String, connector: String}Типы:ObjectНеобходимый:falseПополнить:num-> 所需右侧通讯录个数,默认3 suffix-> label后想要拼接的字段（如id，即取此条数据的id拼接在后方）默认suffix connector -> 连接符（字符串）默认-

  21. параметр:lazyпроиллюстрировать:是否启用懒加载Типы:BooleanНеобходимый:falseПополнить:默认false，效果动el-tree懒加载，不可和openAll或默认展开同时使用

  22. параметр:lazyFnпроиллюстрировать:懒加载的回调函数Типы:FunctionНеобходимый:trueПополнить:当适用lazy时必须传入回调函数，示例:lazyFn='loadNode',返回参数loadNode(node, resolve, from), node->当前展开节点node，resolve->懒加载resolve，from -> left|right 表示回调来自左侧|右侧

  23. мероприятие:addBtnпроиллюстрировать:点击添加按钮时触发的事件Параметры обратного вызова:function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据，2.移动后右侧数据，3.移动的节点keys、nodes、halfKeys、halfNodes对象；通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表

  24. мероприятие:removeBtnпроиллюстрировать:点击移除按钮时触发的事件Параметры обратного вызова:function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据，2.移动后右侧数据，3.移动的节点keys、nodes、halfKeys、halfNodes对象；通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表

  25. мероприятие:left-check-changeпроиллюстрировать:左侧源数据勾选事件Параметры обратного вызова:function(nodeObj, treeObj)见el-tree组件check事件返回值

  26. мероприятие:right-check-changeпроиллюстрировать:右侧目标数据勾选事件Параметры обратного вызова:function(nodeObj, treeObj)见el-tree组件check事件返回值

  27. Слот:left-footer, right-footerпроиллюстрировать:穿梭框左侧、右侧底部slot

  28. Slot: title-left, title-rightпроиллюстрировать:穿梭框标题区左侧、右侧自定义内容

Много темпераментных старичков просили дать награду, спасибо, код есть на гите~~~~~~

Категории