Vue 实现树形视图数据功能


Posted in Javascript onMay 07, 2018

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

这是模拟的树形图数据

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

Vue 实现树形视图数据功能

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

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

Vue 实现树形视图数据功能

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

Vue 实现树形视图数据功能

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

更改open 的值 

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

Vue 实现树形视图数据功能

实现效果

Vue 实现树形视图数据功能

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

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

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

Vue 实现树形视图数据功能

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

Vue 实现树形视图数据功能

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

Vue 实现树形视图数据功能

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

Vue 实现树形视图数据功能

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

Vue 实现树形视图数据功能

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

Vue 实现树形视图数据功能

我们看一下结果

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

Vue 实现树形视图数据功能

然后我点击了A

Vue 实现树形视图数据功能

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

Vue 实现树形视图数据功能

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

Vue 实现树形视图数据功能

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

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

Javascript 相关文章推荐
html a标签-超链接中confirm方法使用介绍
Jan 04 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
Angular和百度地图的结合实例代码
Oct 19 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
webpack配置打包后图片路径出错的解决
Apr 26 Javascript
JavaScript实现简单的弹窗效果
May 19 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 Javascript
JavaScript中CreateTextFile函数
Aug 30 Javascript
js实现可爱的气泡特效
Sep 05 Javascript
JavaScript 跨域之POST实现方法
May 07 #Javascript
ES6关于Promise的用法详解
May 07 #Javascript
React Form组件的实现封装杂谈
May 07 #Javascript
vue如何将v-for中的表格导出来
May 07 #Javascript
浅谈Vue 数据响应式原理
May 07 #Javascript
浅谈Vue响应式(数组变异方法)
May 07 #Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 #Javascript
You might like
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
jQuery日程管理插件fullcalendar使用详解
2017/01/07 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
vue-cli之router基本使用方法详解
2017/10/17 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
js实现蒙版效果
2020/01/11 Javascript
python中while循环语句用法简单实例
2015/05/07 Python
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
Python自定义一个异常类的方法
2019/06/27 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
年度考核评语
2014/01/19 职场文书
新闻专业毕业生英文求职信
2014/03/19 职场文书
治超工作实施方案
2014/05/04 职场文书
项目经理任命书范本
2014/06/05 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
高中生物教学反思
2016/02/20 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python
JavaScript中isPrototypeOf函数
2021/11/07 Javascript
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL
netty 实现tomcat的示例代码
2022/06/05 Servers