vue 用组件的方式渲染树状数据结构新思路

应用场景是这样的,根据客户选择城市(树状结构,大概如下所示);展示到页面,也就是说会与好多层,甚至不确定的情况,一开始选择的方式逐层判断,一层层的遍历,然后后来放弃了,想到了写菜单组件的时候使用过的组件 --- 递归组件对没错,这里只需要把数据展开显示就好了,然后就愉快的啪啪啪了,而且不用担心嵌套层次太深,代码结构也相对之前的逐层遍历要简洁;

[
    {
        "id": 1,
        "text": "A",
        "children": [
            {
                "id": 4,
                "text": "C[父A]",
                "children": [
                    {
                        "id": 7,
                        "text": "F[父C]",
                        "children": [
                            {
                                "id": 3,
                                "text": "G[父F]",
                                "children": []
                            }
                        ]
                    },
                    {
                        "id": 2,
                        "text": "E[父C]",
                        "children": []
                    }
                ]
            }
        ]
    },
    {
        "id": 6,
        "text": "B",
        "children": [
            {
                "id": 5,
                "text": "D[父B]",
                "children": []
            }
        ]
    }
]

递归组件 代码如下;

组件内定义组件名字 name,接受父组件传递下来的值 model;

父组件中 组成并使用子组件

这样树状结构的数据 cityStr 就可以一层层的被剥离展示到页面了。

				
时间: 2024-10-22 01:50:22

vue 用组件的方式渲染树状数据结构新思路的相关文章

根据树状数据渲染树状下拉选项 񜥽

原文: http://blog.gqylpy.com/gqy/441 置顶:来自一名75后老程序员的武林秘籍--必读(博主推荐) 来,先呈上武林秘籍链接:http://blog.gqylpy.com/gqy/401/ 你好,我是一名极客!一个 75 后的老工程师! 我将花两分钟,表述清楚我让你读这段文字的目的! 如果你看过武侠小说,你可以把这个经历理解为,你失足落入一个山洞遇到了一位垂暮的老者!而这位老者打算传你一套武功秘籍! 没错,我就是这个老者! 干研发 20 多年了!我也年轻过,奋斗过!我

vue sChart组件使用不渲染问题及示例

参考:https://www.ctolib.com/mip/lin-xin-vue-schart.html 在网上其他示例里,我试验后发现:渲染到<canvas id="myChart"></canvas>,但是页面一片空白.但用参考链接中的代码页面就会有图表. 不知道是不是版本问题,我的vue版本是2.5.2,vue-schart版本是2.0.0 附schart.js官方文档:https://lin-xin.gitee.io/example/schart/#%

ant design vue table组件一列渲染多个参数

如下效果图,开始时间,结束时间为两个字段 代码: const columns = [ { title: '起止时间', customRender: (text, record) => { const time = `${record.dateFrom}-${record.dateTo}`;//es6写法 const time = '${record.dateFrom}' + '-' + ${record.dateTo}';//es5写法 return time; },}] 原文地址:https:

树状数组知识点详解

树状数组 树状数组是一种数据结构,它的作用就是优化查询和修改的操作.试想,我们假如在做一道题的时候使用裸的一维数组来存储数据,那每次区间修改需要O(1)的时间,但查询却需要O(n)的时间,针对于某些题目,数据量奇大无比,必然会TLE.所以我们使用树状数组来优化这两个操作,使得修改和查询均可以在O(logn)的时间内完成,提升效率. (这是百度百科上树状数组的图) 可以直观地看出树状数组是个什么模式,是的,这就是一棵树,而这棵树上每个节点存储的数据就是它所有儿子节点的数据和.所以我们就可以在树上做

获取子父节点,tree树状结构的方式--通过循环的方式

1.导包 <dependencies> //将domain quary写到了这层 <dependency> <groupId>cn.xxx.aigou</groupId> <artifactId>qqq_product_interface</artifactId> <version>1.0-SNAPSHOT</version> </dependency> <!--springboot相关的依赖

Vue创建组件的三种方式

1.使用 Vue.extend 来创建全局的Vue组件 <div id="app"> <!-- 如果要使用组件,直接,把组件的名称,以 HTML 标签的形式,引入到页面中,即可 --> <mycom1></mycom1> </div> <script> // 1.1 使用 Vue.extend 来创建全局的Vue组件 // var com1 = Vue.extend({ // template: '<h3&g

eclipse projectExplorer视图(以包的方式显示)与navigator视图切换(以文件夹的方式显示)及树状视图与平面视图的切换

projectExplorer与navigator的切换 projectExplorer视图效果 想要此视图效果步骤如下: 分割----------------------------------------- navigator视图效果 想要此视图效果步骤如下: 树状视图与平面视图的切换 切换步骤如下 树状效果 平面效果 原文地址:https://www.cnblogs.com/hfx123/p/9835812.html

vue 之组件递归;

在开发一个 PC 端的项目时,需要开发一个树状结构,直接上效果图如下:点击 "+" 号的时候则展开下一级,点击 "-" 号的时候则收起: 之所以写这篇博客,因为在实现过程中用到了组件递归,觉得之后再遇到此种功能时能借鉴一下,treeViewItem.vue 中通过 name: "treeViewItem" 实现组件内自己调用自己,实现组件递归,从而实现对树状结构数据的渲染: 数据结构如下: 代码如下: menusModule.js (store/

vue入门:(底层渲染实现render函数、实例生命周期)

vue实例渲染的底层实现 vue实例生命周期 一.vue实例渲染的底层实现 1.1实例挂载 在vue中实例挂载有两种方法:第一种在实例化vue时以el属性实现,第二种是通过vue.$mount()方法实现挂载.不管是哪种挂载都不影响vue实例化组件的执行流程和模式,只是通过vue.$mount()方法实现挂载可以更灵活的实现组件复用和挂载. 1 var vm = new Vue({ 2 el:'挂载元素id',//实例化el属性实现挂载 3 ... 4 }) 5 var vm1 = new Vu