脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue 树形视图

Vue 实现树形视图数据功能

 更新时间：2018年05月07日 11:52:34   作者：倪晓磊  
这篇文章主要介绍了Vue 实现树形视图数据功能,利用简单的树形视图实现的，在实现过程中熟悉了组件的递归使用，感兴趣的朋友跟随脚本之家小编一起学习吧

利用简单的树形视图实现，熟悉了组件的递归使用

这是模拟的树形图数据

let all={ 
  name:'all', 
  children:{ 
   A:{ 
    name:'A', 
    children:{ 
     a1:{ 
      name:'a1', 
      children:{ 
       a11:{  
        name:'a11', 
        children:null 
       }, 
       a12:{  
        name:'a12', 
        children:null 
       } 
      } 
     }, 
     a2:{ 
      name:'a2', 
      children:{ 
       b21:{  
        name:'b21', 
        children:null 
       } 
      } 
     } 
    } 
   }, 
   B:{ 
    name:'B', 
    children:{ 
     b1:{ 
      name:'b1', 
      children:{ 
       b11:{  
        name:'b11', 
        children:null 
       }, 
       b12:{  
        name:'b12', 
        children:null 
       } 
      } 
     }, 
     b2:{ 
      name:'b2', 
      children:{ 
       b21:{  
        name:'b21', 
        children:null 
       } 
      } 
     } 
    } 
   } 
  } 
 }

代码如下

treelist.vue

<template> 
<div> 
 <ul> 
  <li > 
   <span @click="isshow()">{{treelist.name}}</span> 
    <tree v-for="item in treelist.children"  
     v-if="isFolder" 
     v-show="open" 
     :treelist="item" 
     :keys="item" 
    ></tree> 
  </li> 
 </ul> 
</div> 
</template> 
<script> 
export default { 
 name:'tree', 
 props:['treelist'], 
 data(){ 
  return{ 
   open:false 
  } 
 },computed:{ 
  isFolder:function(){ 
   return this.treelist.children 
   } 
  } 
 ,methods:{ 
  isshow(){ 
   if (this.isFolder) { 
    this.open =!this.open 
   } 
  } 
 } 
} 
</script> 
<style lang="less"> 
</style>

index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 <title>树形图</title> 
</head> 
<body> 
 <div id="app"> 
  <tree :treelist="treeList"></tree> 
   
 </div> 
</body> 
</html>

index.js

import Vue from 'vue'; 
import tree from '../components/treelist.vue' 
let all={ 
  name:'all', 
  children:{ 
   A:{ 
    name:'A', 
    children:{ 
     a1:{ 
      name:'a1', 
      children:{ 
       a11:{  
        name:'a11', 
        children:null 
       }, 
       a12:{  
        name:'a12', 
        children:null 
       } 
      } 
     }, 
     a2:{ 
      name:'a2', 
      children:{ 
       b21:{  
        name:'b21', 
        children:null 
       } 
      } 
     } 
    } 
   }, 
   B:{ 
    name:'B', 
    children:{ 
     b1:{ 
      name:'b1', 
      children:{ 
       b11:{  
        name:'b11', 
        children:null 
       }, 
       b12:{  
        name:'b12', 
        children:null 
       } 
      } 
     }, 
     b2:{ 
      name:'b2', 
      children:{ 
       b21:{  
        name:'b21', 
        children:null 
       } 
      } 
     } 
    } 
   } 
  } 
 } 
const app=new Vue({ 
 el:"#app", 
 components:{ 
  'tree':tree 
 }, 
 data:{ 
  treeList:all 
 } 
})

在经过踩坑之后，我发现Vue官网有类似的案例，链接→ 传送门

参考过官网的方法后，我尝试着实现了一下

这样写和我踩坑时的 思路不同点在于， 这样一个组件只负责一个 对象,遍历每个children 中的对象，逐个传入组件处理，而我第一次尝试则是 将整个children  传入自身   是一个组件处理多个对象，（第一次尝试的失败案例，有兴趣请看最下方）

这样一个组件处理一个对象 写的好处是什么呢

我可以在组件内自定义开关了

我在data里定义了变量open,因为组件递归，所以相当于每个组件都有个属于自己的open

那为什么第一次踩坑时我不可以用这种方法呢，因为我第一次尝试 是一个组件处理多个对象 就是相当于 一个开关控制 children中的所有对象，当开关打开时会导致 这个同级的所有 对象都被展开

遍历children 挨个传入组件自身    用v-show 来控制是否显示 


定义了一个计算属性，依据children来判断是否继续执行 


在span标签上绑定了一个自定义事件

更改open 的值 

<span @click="isshow()">{{treelist.name}}</span>


实现效果


以下 是我刚开始尝试的时候踩得坑

在这里记录一下，以后遇到类似问题留个印象

首先上来就遇到了这样的报错


找了很久的问题，发现是因为组件内忘记写name了，自身使用自身必须填写name，并且与标签名一致


一开始的实现方法，利用组件递归，显示出当前级的name渲染出来，并将其中的 children 中的所有对象 传给自己然后接着执行相同操作，直到children没有数据，值得一提的是

，如果这里不加上 v-if 就会变成 死循环,就会一直执行下去，所以我们要判断一下当前执行的对象到底还有没有下一级

这里我数据有稍微的改动，所以我第一次传入的数据就是(index.html页面)


然后我定义了一个事件来处理 每一层的关闭和开启，我用弹框来查看Isopen 的值是否被改变


我们看一下结果

刚进入页面时，括号中的undefined是 Isopen 当前的值，因为此时未被定义，所以为undefined


然后我点击了A


因为此时isopen已被反转值，所以此时isopen为true


但是页面仍毫无变化，不说展开功能，就连undefined也没变化



经过一番百度 ，发现原来是vue本身已经不允许这样直接更改 Props接受过来的值了

Vue2.0以后子组件不能更改父组件的值，只能通过子组件$emit(),父组件$on()进行响应更改

您可能感兴趣的文章:

相关文章

  • vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码

    vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码

    这篇文章主要介绍了vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-04-04
  • vue3使用viewer的详细用法举例

    vue3使用viewer的详细用法举例

    viewer.js用于图片浏览的Vue组件,支持旋转、缩放、翻转等操作,这篇文章主要给大家介绍了关于vue3使用viewer的详细用法,文中通过代码介绍是非常详细,需要的朋友可以参考下
    2023-12-12
  • vue.js实现图书管理功能

    vue.js实现图书管理功能

    这篇文章主要为大家详细介绍了vue.js实现图书管理功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-09-09
  • vue 父组件调用子组件方法及事件

    vue 父组件调用子组件方法及事件

    这篇文章主要介绍了vue 父组件调用子组件方法及事件的相关资料，父组件传入数组子组件循环来创建不同的组件模块,所有事件都在子组件内部.怎么实现这样一个功能呢？接下来跟随脚本之家小编一起看看吧
    2018-03-03
  • Vue3使用setup监听props实现方法详解

    Vue3使用setup监听props实现方法详解

    这篇文章主要为大家介绍了Vue3使用setup监听props实现方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • vue中路由的前进和后退问题

    vue中路由的前进和后退问题

    这篇文章主要介绍了vue中路由的前进和后退问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue中是怎样监听数组变化的

    vue中是怎样监听数组变化的

    这篇文章主要介绍了vue中是怎样监听数组变化的，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下
    2020-10-10
  • vue使用ECharts实现折线图和饼图

    vue使用ECharts实现折线图和饼图

    这篇文章主要为大家详细介绍了vue使用ECharts实现折线图和饼图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue 组件中添加样式不生效的解决方法

    vue 组件中添加样式不生效的解决方法

    这篇文章主要介绍了vue 组件中添加样式不生效的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 尤雨溪开发vue dev server理解vite原理

    尤雨溪开发vue dev server理解vite原理

    这篇文章主要为大家介绍了尤雨溪开发的玩具vite，vue-dev-server来理解vite原理，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07

最新评论