Компонент Vue2.x, который отображает строки JSON в древовидную структуру. Основной принцип заключается в использовании рекурсивных компонентов Vue для выполнения предварительного обхода в глубину. Он не только может преобразовать нечитаемую строку JSON в удобочитаемую древовидную структуру, но также может использоваться для извлечения данных поддерева.
Компонент может рекурсивно вызывать себя в пределах своего шаблона. Однако это возможно только в том случае, если у него есть опция имени
- Основная функция: украшение JSON
- Расширенная функция: получение данных JSON, соответствующих данным уровня
Идеи дизайна
<tree
:parent-data="data"
:data="item"
:path="path + (Array.isArray(data) ? `[${index}]` : `.${index}`)"
:path-checked="pathChecked"
:path-selectable="pathSelectable"
:selectable-type="selectableType"
:index="index"
:current-deep="currentDeep"
@click="handleItemClick">
</tree>
пройти черезparent-dataпередать данные отца,dataДанные дочернего элемента передаются. Когда данные поддерева имеют простой тип, они больше не будут попадать в рекурсию. В то же время этот компонент обеспечиваетclickСобытие используется для получения данных дерева определенного узла, а данные потомка постоянно передаются на верхний уровень через рекурсивный механизм, аналогичный "冒泡机制".
Атрибуты
- Если вы используете только базовые функции (улучшение JSON), вам нужно обратить внимание только на функциональный уровень, т.к.
基础характеристики. - Если вы используете расширенные функции (съем на уровне данных), вам нужно обратить внимание на
基础а также高级характеристики.
| Атрибуты | уровень | иллюстрировать | Типы | По умолчанию |
|---|---|---|---|---|
| data | Основание | Исходные данные должны быть украшены, обратите внимание, что это неJSONнить |
JSONобъект |
- |
| deep | Основание | Глубина данных, данные больше этой глубины не будут расширены | number | Infinity |
| path | передовой | Определите самую верхнюю иерархию данных | string | root |
| pathChecked | передовой | Определите, какие уровни данных выбраны | array | [] |
| pathSelectable | передовой | Определите, какие уровни данных можно выбрать | Function(itemPath, itemData) | - |
| selectableType | передовой | Определяет метод выбора, поддерживаемый компонентом, по умолчанию функция выбора отсутствует. | enum: both, checkbox, tree | - |
мероприятие
- Следующие события допустимы, только если используются расширенные функции.
| название события | иллюстрировать | параметр обратного вызова |
|---|---|---|
| click | Событие срабатывает при щелчке уровня данных | (path, data) |
Сравните похожие проекты
| vue-json-tree-view | react-json-tree | pretty-json |
|---|---|---|
на основеVue, но в стилеJSONбольшая разница в коде |
на основеReact
|
на основеJQuery + Bootstrap, стиль наиболее близок к этому проекту |