vue-treeSelect

Компонент выбора дерева на основе vue2.X + Element UI

Установка

# Установка зависимостей
npm install

# Запуск с горячей перезагрузкой на localhost:8080
npm run dev

# Сборка для продакшена с минификацией
npm run build

Журнал обновлений

2017.07.26 Добавлена возможность удаления иконки в компоненте для одиночного выбора.

Описание

По требованию проекта компании было необходимо создать компонент выбора департаментов в виде дерева. Вначале использовался компонент tree из element-ui вместе с el-input для создания компонента tree-select. Однако, было замечено, что при большом объеме данных (например, 5000 департаментов) этот объединенный компонент работает очень медленно, и каждый клик требует около 0.5 секунды для отклика. Кроме того, процесс фильтрации также был неэффективным, и после удаления всех узлов они все равно разворачивались, что делало интерфейс менее удобным.

После множества попыток было решено воспользоваться прототипом компонента tree из element-ui и переписать его самостоятельно. Это привело к значительному улучшению производительности, и компонент стал более отзывчивым. Вероятной причиной стало то, что в element-ui используется слишком много функциональности, что делает el-tree несколько громоздким. Поэтому здесь используются только необходимые функции, что обеспечивает лучшую производительность.Текущий компонент реализует функциональность одиночного и множественного выбора. Можно установить значение по умолчанию для v-model, и если установленное значение id не существует, будет возвращено сообщение об ошибке.

Онлайн демо

Код

---Одиночный выбор---
<tree-select
    :treeData="treeData"
    :treeProps="treeProps"
    v-model="treeSelected"
    :multiple="false"
    placeholder="Выберите департамент"
    @errorCallback="showTreeError"
    @setSelectedId="setSelectedId">
</tree-select>

---Множественный выбор---
<tree-select
    :treeData="treeData"
    :treeProps="treeProps"
    v-model="treeSelectArr"
    :multiple="true"
    placeholder="Выберите департамент"
    @errorCallback="showTreeError"
    @setSelectedId="setSelectedId">
</tree-select>### Атрибуты

treeData: данные узлов дерева, тип: Array[Object] treeProps: { // Настройки label: "name", // Отображаемое имя узла children: "childDepts", // Свойство для подузлов level: "deptLevel" // Уровень узла } v-model: для одиночного выбора тип данных — строка или число, для множественного выбора — массив multiple: false для одиночного выбора, true для множественного выбора placeholder: текстовое напоминание

События

1. setSelectedId: коллбэк, вызываемый при нажатии на узел, параметр — это id узла. Также можно установить возвращаемый узел сам по себе в методе handleNodeClick компонента tree.vue:

this.$emit('setSelectedId', node.id) =>
this.$emit('setSelectedId', node);

Зависит от личных потребностей. 2. errorCallback: при установке значения по умолчанию, если в выпадающем списке нет id, то возвращается сообщение с информацией, параметры:

{
    message: "Обнаружено несуществующее id отдела: ***",
    data: [] || ''
}
```### Требования к атрибутам узловых данных
С учетом идеи, что меньше данных от сервера — быстрее и эффективнее, проект использует только четыре атрибута:

```json
{
    id: 1,
    label: 'тест',
    level: 1,
    children: [] // подузлы
}

На самом деле, атрибут node узла расширен через метод objArrDeepCopy() в utils/tools.js, который выполняет глубокую копию исходных данных и добавляет следующие атрибуты:

{
    visible: true, // для установки показа/скрытия узла при поиске
    expanded: true, // для установки разворачивания/сворачивания узла
    checked: false // атрибут для множественного выбора, состояние выбора текущего узла
}

Эффекты операций

Одиночный выбор

Множественный выбор

Информационные сообщения