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 相关文章推荐
用javascript控制iframe滚动的代码
Apr 10 Javascript
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
Jan 15 Javascript
JS操作Cookies的小例子
Oct 15 Javascript
javaScript的函数对象的声明详解
Feb 06 Javascript
js简单实现竖向tab选项卡的方法
May 04 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
深入浅析Vue全局组件与局部组件的区别
Jun 15 Javascript
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 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设计模式 Bridge (桥接模式)
2011/06/26 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
PHP正则匹配日期和时间(时间戳转换)的实例代码
2016/12/14 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
JavaScript错误处理
2015/02/03 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
python中numpy.zeros(np.zeros)的使用方法
2017/11/07 Python
python绘制双柱形图代码实例
2017/12/14 Python
Python3.6简单反射操作示例
2018/06/14 Python
python查看列的唯一值方法
2018/07/17 Python
python二进制文件的转译详解
2019/07/03 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
python中调试或排错的五种方法示例
2019/09/12 Python
python 消费 kafka 数据教程
2019/12/21 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
Python调用REST API接口的几种方式汇总
2020/10/19 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
违反学校规定检讨书
2014/01/18 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
祝寿主持词
2015/07/02 职场文书
如何写新闻稿
2015/07/18 职场文书
2015军训通讯稿大全
2015/07/18 职场文书