当前位置:首页 > 编程教程 > vue技术文章 > Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现

详解Vue递归组件+Vuex开发树形组件Tree--递归组件

  • 发布时间:
  • 作者:码农之家
  • 点击:115

这篇文章主要知识点是关于vue、递归组件、Vuex、树形组件Tree、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js实战
Vue.js实战高质量扫描版
  • 类型:Vue大小:196.7 MB格式:PDF作者:梁灏
立即下载

Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现

写在前面

首先,本篇文章所开发的组件并非一个已经开源的上线组件,所以如果你急于需要一个插件来只做你的项目,那么并不能带给你及时的帮助。这个组件的开发预计写两篇文章,一遍写组件,一篇写组件逻辑。这篇文章也是我自己开发的从无到有的过程,所以它可以为你提供一些Tree组件开发的思路,代码写到一定程度,不能完全依赖插件了,有时间可以看看插件源码或者动手去开发,这样真的能加深对技术的掌握程度。

开发过程

1.数据仓库-Vuex

2.组件的循环创建-递归组件

需求决定了我的技术选型,项目需求是一个中国各级政府列表的选择,后台基于大数据去汇总各级政府网站的文章决策,然后交给前端去展示,左侧显示各级政府的Tree,右侧显示具体文章。因为政府数据的不确定性,所以显示政府的Tree的每一层级也是动态获取的,就比如北京市下级的海淀区政府在一小时前可能不存在某某政策文章,那么北京市节点的子节点中就不会包含海淀区这一子节点,但是10分钟前网站发布了一篇文章,那么就需要在北京市中添加海淀区,为了良好的实时性效果,每一级的子节点都不固定。

因此 树状结构的data是变化的而不是在初始化的时候就固定好 的,数据驱动Dom的思想,data有多少层级,Dom就有多少层级,data不定,所以Dom也无法提前定义好层级,决定采用Vue的递归组件,组件递归自身实现无限制层级的渲染。需求中每一个节点的Tree都具有增删改的功能,因为data是单例的,全局维护着一个data数据源头,增删改也就是操作data第n个子节点的某个子元素,因此采用了Vuex作为一个data存放的仓库( 这不是一个组件库,只是一个项目的应用 )。

项目的关键点:

1.动态加载子节点,也就是说页面加载的时候,根节点的 nodes 子节点数组可能是个空数组,每次单击节点去获取子节点数组。

2.全局单例的树节点对象 data 对象,每次得到新的子节点,需要去维护这个对象,因为数据与dom动态绑定,所以每次数据对象内部发生了变化,dom也会重绘。

vue对虚拟dom的映射通过使用diff算法进行了优化,所以不用担心,重绘造成页面闪屏

树 data 数据结构如下:

let data = {
 id: "01",
 lable: "政府机构",
 nodes: [
  {
  id: "02",
  lable: "中央机关",
  nodes: [{
   //..
  }]
  },
  {
  id: "03",
  lable: "直辖市",
  nodes: [{
   //..
   //北京市...
   //天津市..
  }]
  },
 ]
 };

显示成这样:

Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现

每一个节点包含id,label,nodes三个属性,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都会循环子节点。绑定具体数据的时候再具体分析。不断调用自身,当然这只是一个例子,实际情况还要改造一下:

新建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>

创建Tree.vue作为节点树的入口:

<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>

在Tree.vue入口组件里引入子组件TreeMenu.vue,并且向子组件传递数据label和nodes,这里data先预定义一个简单的对象,后面会动态获取。

TreeMenu.vue作为树形菜单组件,负责递归和数据渲染,它会接受来自入口组件传递来的label和nodes数据,进行渲染, 并且继续递归传递nodes和label 。

在从父组件接收nodes和label后,先循环渲染n个tree-menu组件,然后每一个tree-menu又会递归自身,所以数据就这样一层层向下传递nodes=>nodes.node=>nodes.node.node,此时已经完成了数据与Dom的绑定,可以修改一下Tree.vue中的tree数据源,看一下组件是否动态改变了。现在渲染如下图:

Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现

数据正确渲染,现在需要加一些样式和点击事件(展开与收缩),就不做详细介绍了,代码如下: (向下传递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 : @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>

修改后会展开收缩与缩进,一些箭头旋转等样式问题就不详细写了。

Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现

总结

以上所述是小编给大家介绍的Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

vue 相关电子书
学习笔记
网友NO.657162

vue.js学习之递归组件

递归组件 组件在它的模板内可以递归地调用自己,只有当它有 name 选项时才可以。 在官网这句话就是关键定义组件是一定要有name属性。按照这个思路我们开动吧。 实现最终效果图: 模拟数据格式如下 : var data = [{ "id": "1", "data": { "menuName": "项目管理", "menuCode": "", }, "childTreeNode": [{ "data": { "menuName": "项目", "menuCode": "BusProject", }, "childTreeNode": [] }, { "data": { "menuName": "我的任务", "menuCode": "BusProject", }, "childTreeNode": [] }, { "data": { "menuName": "人员周报", "menuCode": "BusProject", }, "childTreeNode": [] }] }, { "id": "2", "data": { "menuName": "数据统计", "menuCode": "BusClock", }, "childTreeNode": [] }, { "id": "3", "data": { "menuName": "人事管理", "menuCode": "", }, "childTreeNode": [] }, { "id": "4", "data": { "menuName": "基础管理", "menuCode": "", }, "childTreeNode": [] }] html我们思路按照ul里面套li,无限ul套li,标题用div元素……

网友NO.253283

Vue.js 递归组件实现树形菜单(实例分享)

最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单。 项目结构: main.js 作为入口,很简单: import Vue from 'vue'Vue.config.debug = trueimport main from './components/main.vue'new Vue({ el: '#app', render: h = h(main)}) 它引入了一个组件 main.vue: template div class="tree-menu" ul v-for="menuItem in theModel" my-tree :model="menuItem"/my-tree /ul /div/templatescriptvar myData = [ { 'id': '1', 'menuName': '基础管理', 'menuCode': '10', 'children': [ { 'menuName': '用户管理', 'menuCode': '11' }, { 'menuName': '角色管理', 'menuCode': '12', 'children': [ { 'menuName': '管理员', 'menuCode': '121' }, { 'menuName': 'CEO', 'menuCode': '122' }, { 'menuName': 'CFO', 'menuCode': '123' }, { 'menuName': 'COO', 'menuCode': '124' }, { 'menuName': '普通人', 'menuCode': '124' } ] }, { 'menuName': '权限管理', 'menuCode': '13' } ] }, { 'id': '2', 'menuName': '商品管理', 'menuCode': '' }, { 'id': '3', 'menuName': '订单管理', 'm……

网友NO.475654

Vue.js递归组件实现组织架构树和选人功能

大家好!先上图看看本次案例的整体效果。 浪奔,浪流,万里涛涛江水永不休。如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不能容易太多。下面就手把手带您一步步拨开这个案例的层层迷雾。 实现步骤如下: 1. api构建部门和员工信息接口,vuex全局存放部门list和员工list数据信息。 api: export default { getEmployeeList () { return { returncode: 0, message: '', result: [ { id: 1, employeeName: '吴亦凡', departmentId: 44 }, { id: 2, employeeName: '鹿晗', departmentId: 45 }, { id: 3, employeeName: '孙红雷', departmentId: 44 }, { id: 4, employeeName: '周杰伦', departmentId: 45 }, { id: 5, employeeName: '张国荣', departmentId: 45 }, { id: 6, employeeName: '陈百强', departmentId: 45 }, { id: 7, employeeName: '谭咏麟', departmentId: 41 }, { id: 8, employeeName: '谷村……

网友NO.216672

Vue2递归组件实现树形菜单

今天看了老长时间递归组件,官方给的教程太简便了,根本看不出到底怎么用。于是自己查网摸索了一下,这儿只把核心思想写出来。 效果如下图,点击后打开二级菜单,再点击后打开三级。 //js //引子//思想:当v-if=‘false'时,循环时进行的。所以一开始就设置为false。 ggg:{ name:'gs', template:` div p @click.stop='show=!show'我是p标签/p //这儿show必须要初始值为false,不然就是堆栈溢出,死循环。 gs v-if='show' /gs //这个是循环组件。命名后当函数使。 /div } 由于每次递归组件,就相当于实例化了一次组件。所有写在组件data中的值都是该组件专属的。 树状结构: 我们在父组件给出一个数据,子组件调用这个数据,然后子组件的子组件调用它父组件的数据,如此循环下去。只要数据结构相同,他们调用的方法相同,就行的通。当最后没有子组件的时候, 它不会报错……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com