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 相关文章推荐
jQuery 各种浏览器下获得日期区别
Dec 22 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
Jul 13 Javascript
vue.js框架实现表单排序和分页效果
Aug 09 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
使用async-validator编写Form组件的方法
Jan 10 Javascript
详解如何在react中搭建d3力导向图
Jan 12 Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 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
MySQL 日期时间函数常用总结
2012/06/12 PHP
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
小结Python用fork来创建子进程注意事项
2014/07/03 Python
实例解析Python设计模式编程之桥接模式的运用
2016/03/02 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
Python函数返回不定数量的值方法
2019/01/22 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
Java平台和其他软件平台有什么不同
2015/06/05 面试题
北京某公司的.net笔试题
2014/03/20 面试题
开办饭店创业计划书
2013/12/28 职场文书
小学生安全责任书
2014/07/25 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
车队安全员岗位职责
2015/02/15 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers