vue树形表格内容太长(VUE 无限层级树形数据结构显示的实现)
类别:编程学习 浏览量:2052
时间:2021-10-19 06:06:44 vue树形表格内容太长
VUE 无限层级树形数据结构显示的实现目录
- 组件递归调用
- 使用render方法
在做项目中,会遇到一些树形的数据结构,常用在左侧菜单导航,或者评论引用等地方,这种数据结构有个特点是不知道它会嵌套多少层,所以用template去展示这样的数据时就有点棘手,这篇文章梳理两种展示这种数据结构的方法。
文章中用到的数据是下面这个:
mainData: { value: "root", children:[{ value: "层级1-1", children:[{ value: "层级2-1", children:[{ value: "层级3-1", children:[] }] },{ value: "层级2-2", children:[] }] },{ value: "层级1-2", children:[] }] }
也就是下面这个样子。
第一种是组件递归调用自己的方式,创建一个组件,该组件在引用自己去展示children的数据,子组件如下:
<template> <li> <li class="demo"> {{treeData.value}} <tree-comp v-for="(item, index) in treeData.children" :treeData="item"></tree-comp> </li> </li> </template> <script> export default { name: 'treeComp', props:{ treeData: { default: function(){ return {} } } }, mounted(){}, methods:{} } </script> <style lang="less" scoped> .demo{padding:5px 0;margin:1px 10px;text-align: left;font-size:16px;max-width:500px;border-left:1px dashed #999; &:before{content:'--';display: inline-block;padding:0 4px;} } </style>
然后创建父组件,父组件使用子组件,并将数据传入子组件。
<template> <tree-comp :treeData="mainData"></tree-comp> </template> <script> export default { name: 'treeMain', data () { return { mainData: { value: "root", children:[ { value: "层级1-1", children:[{ value: "层级2-1", children:[{ value: "层级3-1", children:[] }] },{ value: "层级2-2", children:[] }] },{ value: "层级1-2", children:[] } ] } } }, components:{ "tree-comp": () => import('./TreeComp') }, mounted(){}, methods:{} } </script>
关于递归组件的内容,在官方文档里是有提到的-->递归组件
使用render方法除了使用组件的方式,也可以使用vue的render方法,去利用JavaScript 的完全编程的能力,实现递归处理树形数据,从而展示出无限层级树。如下:
<template> <tree-comp :treeData="mainData"></tree-comp> </template> <script> export default { name: 'treeRender', data () { return { mainData: { value: "root", children:[ { value: "层级1-1", children:[{ value: "层级2-1", children:[{ value: "层级3-1", children:[] }] },{ value: "层级2-2", children:[] }] },{ value: "层级1-2", children:[] } ] } } }, components:{ treeComp:{ functional: true, props: {treeData: Object}, render(h, {props: {treeData = {}}}) { const creatNode = (node)=>{ if(node.children && node.children.length > 0){ let hArr = node.children.map(item=>{ return creatNode(item) }) return h('li', {class:'demo'}, [node.value, hArr]) }else{ return h('li', {class:'demo'}, [node.value]) } } return creatNode(treeData) }, } }, mounted(){}, methods:{} } </script> <style lang="less" scoped> .demo{padding:5px 0;margin:1px 10px;text-align: left;font-size:16px;max-width:500px;border-left:1px dashed #999; &:before{content:'--';display: inline-block;padding:0 4px;} } </style>
其中最核心的就是在render方法里,creatNode方法用递归的方式,深度优先遍历树状数据,生成vnode,然后渲染出了页面。
到此这篇关于VUE 无限层级树形数据结构显示的实现的文章就介绍到这了,更多相关VUE 无限层级树形结构内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue全局配置文件env(vue项目多环境配置.env的实现)
- vue实现一个炫酷的日历组件(vue利用Moment插件格式化时间的实例代码)
- vue 中后台管理系统(Vue实现学生管理功能)
- vue自定义组件定义事件(基于Vue实现自定义组件的方式引入图标)
- vue如何获取元素(vue第一次获取不到元素的解决方法记录)
- vue element admin接口(Vue-Element-Admin集成自己的接口实现登录跳转)
- vue设置属性没响应(Vue.$set 失效的坑 问题发现及解决方案)
- vueelementui表格操作(Vue组件库ElementUI实现表格列表分页效果)
- vue页面关闭前的执行(Vue 页面监听用户预览时间功能的实现代码)
- vue 访问后台接口(vue轮询请求解决方案的完整实例)
- vue.js开发网站的关键技术(Vue.js项目前端多语言方案的思路与实践)
- vue websocket实时刷新数据(Vue+WebSocket页面实时刷新长连接的实现)
- vue2.0自定义指令(vue2实现provide inject传递响应式)
- vue中的定时函数(vue计时器的实现方法)
- vue 路由的两种模式(Vue3使用路由VueRouter4的简单示例)
- vue实现一个tab栏(Vue实现tab导航栏并支持左右滑动功能)
- 有种尴尬叫朋友圈忘屏蔽,大学生上演社死现场,父母亲自下场吐槽(有种尴尬叫朋友圈忘屏蔽)
- 朋友圈屏蔽你的人,可以直接看淡了(朋友圈屏蔽你的人)
- 金球奖只青睐那些会戴珠宝的女人(金球奖只青睐那些会戴珠宝的女人)
- 浙江省一个县,人口超40万,建县历史超1100年(浙江省一个县人口超40万)
- 五代十国南唐历代国君(五代十国南唐历代国君)
- 飞机引进工程师杨隆 匠人匠心,只争朝夕(飞机引进工程师杨隆)
热门推荐
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9