Эта статья была написана год назад, и некоторые коды изображений были изменены и воспроизведены здесь с небольшими исправлениями.
написать впереди
Прежде всего, компонент, разработанный в этой статье, не является онлайн-компонентом с открытым исходным кодом, поэтому, если вам срочно нужен плагин для вашего проекта, он не принесет вам своевременную помощь. Ожидается, что при разработке этого компонента будут написаны две статьи, одна для компонента и одна для логики компонента. Эта статья также является процессом моей собственной разработки с нуля, поэтому она может дать вам некоторые идеи для разработки компонентов Tree.Код написан в определенной степени, и вы не можете полностью полагаться на плагин. Если у вас есть время, вы можете посмотреть исходный код плагина или заняться самостоятельно разработкой, которая действительно может углубить владение технологией.
процесс развития
1. Хранилище данных — Vuex
2. Циклическое создание компонентов - рекурсивные компоненты
Спрос определяет мой выбор технологии.Спрос проекта - это выбор списка правительств на всех уровнях в Китае.Бэкэнд обобщает статьи решений правительственных сайтов всех уровней на основе больших данных, а затем передает их во внешний интерфейс для отображения.Слева показано Дерево правительств на всех уровнях., конкретная статья отображается справа. Из-за неопределенности правительственных данных каждый уровень дерева, отображающий правительство, также получается динамически.Например, правительство нижнего уровня округа Хайдянь в Пекине может не иметь определенной статьи политики час назад, тогда дочерние узлы пекинский узел Подузел района Хайдянь не будет включен в подузел, но веб-сайт опубликовал статью 10 минут назад, поэтому необходимо добавить район Хайдянь в Пекине.Для хорошего эффекта в реальном времени подузел -узлы каждого уровня не фиксируются.
следовательноДанные древовидной структуры изменяются, а не фиксируются во время инициализацииДа, данные управляют идеей Дом, количество уровней данных, количество уровней Дома, данные неопределенны, поэтому Дом не может определить уровень заранее, решил использовать рекурсивные компоненты Vue, компоненты рекурсивно реализовать неограниченные уровни рендеринга. Дерево каждого узла в требовании имеет функцию добавления, удаления и изменения, поскольку данные являются одноэлементными, а источник данных данных поддерживается глобально.Добавление, удаление и изменение заключается в работе с определенным дочерним элементом n-го дочерний узел данных, поэтому Vuex используется как хранилище, где хранятся данные (Это не библиотека компонентов, а просто проектное приложение.).
Ключевые моменты проекта:
1. Динамически загружать дочерние узлы, то есть при загрузке страницы корневой узелnodesМассив дочерних узлов может быть пустым массивом каждый раз, когда вы щелкаете узел, чтобы получить массив дочерних узлов.
2. Объект узла дерева глобального синглтонаdataObject, каждый раз, когда вы получаете новый дочерний узел, вам необходимо поддерживать этот объект, потому что данные динамически привязываются к dom, поэтому каждый раз, когда объект данных изменяется, dom будет перерисовываться.
Отображение виртуального дома Vue оптимизировано с использованием алгоритма diff, поэтому не беспокойтесь, перерисовка вызовет заставку страницы.
ДеревоdataСтруктура данных выглядит следующим образом:
let data = {
id: "01",
lable: "政府机构",
nodes: [
{
id: "02",
lable: "中央机关",
nodes: [{
//..
}]
},
{
id: "03",
lable: "直辖市",
nodes: [{
//..
//北京市...
//天津市..
}]
},
]
};
Показывает так:
Каждый узел содержит три атрибута: идентификатор, метка и узлы. Узлы распространяются на дочерние узлы. Общее количество уровней не определено и получено в соответствии с фоном.
рекурсивный компонент
Пример простого рекурсивного компонента выглядит следующим образом:
<template>
<div class="tree-menu">
//组件内部不断用自身,只要子节点存在就递归调用
<tree-menu v-for='(item, index) of dataNodes' :key='index'></tree-menu>
</div>
</template>
<script>
export default {
name:'TreeMenu',//组件名称必须写
data() {
return {
dataNodes: {
//...
}
}
}
}
</script>
TreeMenu.vue объявляет компонент TreeMenu и выставляет его наружу, вызывая себя внутри компонента, что является рекурсивной идеей, сколько уровней связанных dataNodes, то сколько уровней рекурсии, потому что каждый уровень имеет v-for будет Loop дочерние узлы. При привязке конкретных данных они будут детально проанализированы. Продолжайте называть себя, конечно, это всего лишь пример, реальная ситуация должна быть преобразована:
Создайте новый TreeMenu.vue как логический компонент для отображения узлов:
<template>
<div class="tree-menu">
<div>{{label}}</div>//节点名称
<tree-menu //如果nodes.length>0就递归显示子节点
v-for="(node, index) of nodes"
:key="index"
:nodes="node.nodes" //子节点的子节点向下传递
:label="node.label"
>
</tree-menu>
</div>
</template>
<script>
export default {
name: "TreeMenu",
props:['label','nodes'],//数据通过pros向下传递,全局唯一数据源
data() {
return {};
}
};
</script>
Создание дерева. В качестве входного узла дерева:
<template>
<div class="tree-alone">
<tree-menu :label="tree.label" :nodes="tree.nodes"></tree-menu>
</div>
</template>
<script>
import TreeMenu from './TreeMenu.vue'
export default {
name: 'tree',
data() {
return {
tree: {
id: "01",
lable: "总层级",
nodes: [
{
id: "02",
label: "层级1",
nodes: [{
label: '层级1-1'
}]
},
{
id: "03",
label: "层级2",
nodes: []
},
]
};
}
}
},
components: {
TreeMenu
}
}
</script>
Введите подкомпонент TreeMenu.vue в компонент входа Tree.vue и передайте метку данных и узлы в подкомпонент.Здесь данные сначала предопределяют простой объект, который будет динамически получен позже.
Как компонент древовидного меню, TreeMenu.vue отвечает за рекурсию и рендеринг данных, он будет принимать для рендеринга данные меток и узлов, переданные от компонента входа.И продолжайте рекурсивно передавать узлы и метки.
После получения узлов и меток от родительского компонента n компонентов древовидного меню визуализируются в цикле, а затем каждое древовидное меню рекурсивно само себя, поэтому данные передаются слой за слоем nodes=>nodes.node=>nodes .node .node, на данный момент привязка данных и Dom завершена.Вы можете изменить источник данных дерева в Tree.vue, чтобы увидеть, изменился ли компонент динамически. Теперь визуализируйте, как показано ниже:
Данные отрисовываются корректно.Теперь нужно добавить стили и кликовые события (развернуть и сжать), поэтому не буду вдаваться в подробности.Код такой: (передайте параметр depth вниз, чтобы получить индекс уровня)
//Tree.vue
<template>
<div class="tree-alone">
<tree-menu :label="tree.label" :nodes="tree.nodes" :depth="0"></tree-menu>
</div>
</template>
//TreeMenu.vue
<template>
<div class="tree-menu">
<div :style="indent" @click="toggleChildren">{{label}}</div>
<div v-if="showChildren">
<tree-menu
v-for="(item, index) of nodes"
:key="index"
:nodes="node.nodes"
:label="node.label"
:depth="depth + 1"
></tree-menu>
</div>
</div>
</template>
<script>
export default {
name: "TreeMenu",
props: ["label", "nodes"],
data() {
return {
showChildren: false
};
},
methods: {
toggleChildren() {
this.showChildren = !this.showChildren;
}
},
computed: {
indent() {
return { transform: `translate(${this.depth * 20}px)` };
}
}
};
</script>
После модификации он будет расширяться, сжиматься и делать отступы, а некоторые вопросы стиля, такие как вращение стрелок, не будут подробно описаны.