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实现的listview效果
Apr 28 Javascript
高亮显示web页表格行的javascript代码
Nov 19 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 Javascript
JS烟花背景效果实现方法
Mar 03 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
移动端js触摸事件详解
Sep 18 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 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 和 XML: 使用expat函数(三)
2006/10/09 PHP
php实现快速排序法函数代码
2012/08/27 PHP
如何使用php输出时间格式
2013/08/31 PHP
php实现水仙花数示例分享
2014/04/03 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
php用户名的密码加密更安全的方法
2019/06/21 PHP
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
Node.js利用断言模块assert进行单元测试的方法
2017/09/28 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
urllib2自定义opener详解
2014/02/07 Python
python梯度下降法的简单示例
2018/08/31 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
python 模块导入问题汇总
2021/02/01 Python
TCP/IP模型的分界线
2012/12/01 面试题
易程科技软件测试笔试
2013/03/24 面试题
上班看电影检讨书
2014/02/12 职场文书
房产转让协议书
2014/04/11 职场文书
党员检讨书
2014/10/13 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
python 实现定时任务的四种方式
2021/04/01 Python