vue php tree,Vue 实现树形视图数据功能
这篇文章主要介绍了关于实现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
{{treelist.name}}
v-if="isFolder"
v-show="open"
:treelist="item"
:keys="item"
>
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
}
}
}
}
index.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 的值
{{treelist.name}}
实现效果
以下 是我刚开始尝试的时候踩得坑
在这里记录一下,以后遇到类似问题留个印象
首先上来就遇到了这样的报错
找了很久的问题,发现是因为组件内忘记写name了,自身使用自身必须填写name,并且与标签名一致
一开始的实现方法,利用组件递归,显示出当前级的name渲染出来,并将其中的 children 中的所有对象 传给自己然后接着执行相同操作,直到children没有数据,值得一提的是
,如果这里不加上 v-if 就会变成 死循环,就会一直执行下去,所以我们要判断一下当前执行的对象到底还有没有下一级
这里我数据有稍微的改动,所以我第一次传入的数据就是(index.html页面)
然后我定义了一个事件来处理 每一层的关闭和开启,我用弹框来查看Isopen 的值是否被改变
我们看一下结果
刚进入页面时,括号中的undefined是 Isopen 当前的值,因为此时未被定义,所以为undefined
然后我点击了A
因为此时isopen已被反转值,所以此时isopen为true
但是页面仍毫无变化,不说展开功能,就连undefined也没变化
经过一番百度 ,发现原来是vue本身已经不允许这样直接更改 Props接受过来的值了
Vue2.0以后子组件不能更改父组件的值,只能通过子组件$emit(),父组件$on()进行响应更改
相关推荐:
vue php tree,Vue 实现树形视图数据功能相关推荐
- Vue 入门,Vue属性和指令
初步认识vue github地址:https://github.com/jiaoshibo/vue vue是一套构建用户界面的渐进式框架,是mvvm框架的一种.vue采用了自底向上增量开发的设计,其核 ...
- vue+element tree(树形控件数据格式)组件(1)
vue+element tree(树形控件数据格式)组件(1), 最近做了第一个组内可以使用的组件,虽然是最简版,也废了不少力.各位前辈帮我解决问题,才勉强搞定.让我来记录这个树形组件的编写过程和期间 ...
- vue 修改对象的值视图没有发生改变_在vue中处理对象属性改变视图不更新问题? - echart...
...图等等,但是这些代码比较难写,因此我们通常会用借助echarts,那你知道如何使用echarts吗?这篇文章就和大家讲讲echarts的使用方法,有一定的参考价值,感兴趣的朋友可以看看.以饼状图 ...
- vue-router路由、mixin混入、vue-resource、axios、计算属性watch、moment.js、vuex、vue-cli、数据双向绑定、搭建vue环境、vue实例、配置启动项
路由vue-router介绍: // 1.前端路由核心:锚点值的改变,根据不同的锚点值,渲染指定dom位置的不同数据.// 2.vue中,模板数据不是通过ajax请求的,而是调用函数获取到模板内容// ...
- ant design vue 组件 Tree
ant design vue 组件 Tree 实现效果: 实现代码: <div class="tree"><a-treeshow-iconshow-line:lo ...
- 前端Vue学习之路(四)axios请求数据
axios 1.增加新知识 2.旧方案 3.新方案(一) 4.为什么要用拦截器 (新方案二) 1.增加新知识 假如每个组件都引用axios,后期如果axios库不再维护了,那每个组件都要改动 所以封装 ...
- vue使用html渲染组件,Vue.js在渲染组件之前填充数据
我是Vue.js的新手,我试图创建一个没有成功的简单组件,它包含一个selectList,我试图填充它的选项数据来模拟Ajax请求,这是我的代码:Vue.js在渲染组件之前填充数据 HTML {{n. ...
- Vue.js 打造酷炫的可视化数据大屏
可视化技术与 Vue 介绍 实验介绍 在本节实验中,将对可视化技术的应用场景.发展历程进行介绍,让大家对可视化技术有一个基础的概念.随后将介绍如今流行的可视化框架与其之间的优缺点对比.最后介绍 Vue ...
- 手把手教你剖析vue响应式原理,监听数据不再迷茫
Object.defineProperty实现vue响应式原理 一.组件化基础 1."很久以前"的组件化 (1)asp jsp php 时代 (2)nodejs 2.数据驱动视图( ...
最新文章
- ubuntu下安装wine
- python装饰器作用-Python 装饰器的作用
- 【采用】无监督学习在反欺诈中的应用
- NetBeans 7 Python 又回来了
- NDK Socket编程:面向连接的通信(tcp)
- 创业不要把大公司当直接对手
- 正弦定理和余弦定理_高三 | 数学必修五正弦定理和余弦定理应用举例考点梳理...
- 中维云视通录像文件存储及设置_视频监控存储方式选择,磁盘阵列与NVR优势对比...
- Key/Value之王Memcached初探:一、掀起Memcached的盖头来
- iOS开发之使用Git的基本使用(二)
- 奔向成功,有志人士创业的十大策略
- 磁盘结构非常详细的介绍
- 【UOJ 275】最短路径问题
- mustache模板引擎
- win10系统自带图标/壁纸位置
- 游戏封包模拟器_问道模拟器人物移动封包分析教程
- PingCAP,中国第一只开源独角兽总融资达3.4亿美元,不能错过的开源深度解析
- 两个tplink路由器有线桥接_【设置教程】TP-Link路由器有线桥接
- 高效便捷组卷功能,学练考一体化让考试更轻松
- 如何打印菱形图案(C语言)
热门文章
- [微信开发] - 关于测试号以及消息发送及回复
- 坏消息!FCC默许美国ISP在未经批准之情况下出售用户数据!
- Salt-Minion配置文件详解
- 在php中使用cookie,PHP中如何使用Cookie
- adb interface找不到驱动程序_Windows 10现支持更多设备的驱动程序更新
- 脚注交叉引用序号不一样_利用Word的尾注来做参考文献的注释编号--解决编号加方括号,交叉引用,去除尾注上访横线等问题...
- 电脑位数怎么看_看完了这篇文章你就知道怎么选电脑了...
- 微型计算机机房湿度不宜过大对,2013年计算机等考三级PC技术练习题及答案(1)...
- Mycat实现Mysql的一主一从和双主双从读写分离
- myeclipse需要配置服务器得项目是,【SpringMVC】使用Myeclipse创建SpringMVC项目【超详细教程】...