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怎么配置到idea(idea编译器vue缩进报错问题场景分析)
- vue前端打包发布教程(Vue项目打包、合并及压缩优化网页响应速度)
- vue 排班安排(vue实现钉钉的考勤日历)
- springboot如何解析vue登录参数(SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解)
- vue查询条件生成工具(vue实现四级导航及验证码的方法实例)
- vue创建dom节点(Vue批量更新dom的实现步骤)
- vue调用组件内部的方法(Vue如何实现组件间通信)
- vue 组件布局(Vue实现固定底部组件的示例)
- vue原样表格导出excel(Vue导出Excel功能的全过程记录)
- vuex原理及使用方法(Vuex状态机的快速了解与实例应用)
- vue移动端项目用什么打包工具(浅谈使用Vue完成移动端apk项目)
- vue 选中背景高亮(vue 如何设置背景颜色及透明度)
- vue封装组件技巧(浅谈vue中所有的封装方式总结)
- vue router用法(如何在Vue 3中扩展Vue Router链接详解)
- vue基础语法对象(浅析从面向对象思维理解Vue组件)
- vue双向数据绑定js如何实现(纯JS如何实现vue.js下的双向绑定功能)
- 泰国旅游攻略(泰国旅游攻略必去景点)
- 数字藏品市场有多乱 周杰伦丢了 一只猴 ,损失超300万(数字藏品市场有多乱)
- 这里输入关键词(怎么输入关键词搜索)
- 得这个 难治病 的人太多了,300个人赶到杭州商量怎么办(得这个难治病的人太多了)
- 经度,世界时间腕表的灵魂(世界时间腕表的灵魂)
- 阿里最新财报公布 三季度营收增长3 ,将增加150亿美元回购额度 在美股价小涨(阿里最新财报公布)
热门推荐
- dedecms搜索功能怎么设置详细(DEDECMS自定义联动类别调用及修改方法)
- vue项目部署到服务器的nginx(Nginx部署vue项目和配置代理的问题解析)
- 循环查询sql server(SQL Server 树形表非循环递归查询的实例详解)
- 如何判别云服务器的优劣(选用云服务器的这四大风险必须知道)
- 阿里云服务器远程密码在哪(教你如何重置阿里云服务器远程连接密码)
- python怎么操作mysql(详解Python的数据库操作pymysql)
- php构成方法的关键字是(PHP中的self关键字详解)
- dedecms更新后设置不显示(dedecms中tags页面显示错位的解决方法)
- docker容器无法启动(Docker 无法停止或删除容器服务问题的解决方案)
- sqlserver游标实例(Sql Server临时表和游标的使用小结)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9