Vue中树形结构简单实现

怼烎@ 2022-05-25 20:59 203阅读 0赞

# Vue中树形结构简单实现 #

### 效果 ###

*  ![oKyM2wM.png][]

### 代码 ###

#  #

<template >
      <div>
        <grouplists :datas='datas'></grouplists>
      </div>
    </template>
    
    <script>
    
    
    export default {  //这儿用的脚手架，若是普通文件，这儿就是new Vue（{}）
      data(){
        return {
        datas:[{
          "name":"组1",
          "sublists":[{
            "name":"组1-1"
            }
          ]
        }]
        }
      },
      components:{
        grouplists:{
          name:'gs',
          template:`
          <ul >
            <li v-for='a in datas' @click.stop.self='show=!show'>
              <img src="图片地址url"/>
              组名：{
        {a.name}}
              <gs :datas='a.sublists' v-if='show' ></gs>
            </li>
          </ul>`,
          props:['datas'],
          data(){
            return {
              show:false
            }
          }
        }
      }
    }
    </script>
    <style>
      li{list-style-type:none;}
    </style>

[oKyM2wM.png]: https://i.imgur.com/oKyM2wM.png

发表评论取消回复

表情：

评论列表（有 0 条评论，203人围观）

还没有评论，来说两句吧...

相关阅读

相关树形结构渲染

今天终于得空了，正好有朋友问我树形数据结构如何渲染，我在网上给他搜简单易懂的发现好多意思不够简明我就写了一个递归小方法方便大家理解，之后自己需要什么就拿去改一改就好了

ゝ一世哀愁。/ 2022年12月25日 14:55/ 0 赞/ 229 阅读

相关在vue项目中使用树形结构的穿梭框

先看一下最后的效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

青旅半醒/ 2022年11月18日 04:57/ 0 赞/ 225 阅读

相关 html5 树形结构 js,用JavaScript实现一个简单的树结构

数据源用数组混json结构，实现了基本的功能。效率一般，跟 dhtree 梅花雪树对比了下，都差不多。 (ps感觉比dhtree快点，跟梅花雪树差不多，个人测试) 这个实现树

谁借莪１个温暖的怀抱￠/ 2022年10月06日 07:57/ 0 赞/ 307 阅读

相关 Qt QTreeWidget 树形结构实现 .

[ 来源 http://www.cnblogs.com/Romi/archive/2012/04/16/2452709.html][_ http_www.cnblogs.

青旅半醒/ 2022年09月21日 01:11/ 0 赞/ 247 阅读

相关 Redis: 实现树形数据结构

目的： n 实现树形数据结构 n 一次获取所有子节点节点间没有排序，如果要实现排序，可以在每个节点增加一个排序字段，在 SORT

落日映苍穹つ/ 2022年08月09日 15:50/ 0 赞/ 316 阅读

相关 Mybatis+Mysql 实现树形结构查询

Mybatis <collection 实现树形结构>该实现使用的是SpringBoot 其实用Spring也是差不多的只要知道Mapper怎么写就可以

客官°小女子只卖身不卖艺/ 2022年05月31日 04:08/ 0 赞/ 513 阅读

相关 Vue中树形结构简单实现

Vue中树形结构简单实现效果 ![oKyM2wM.png][] 代码 <template > <div>

怼烎@/ 2022年05月25日 20:59/ 0 赞/ 204 阅读

相关 Vue树形结构操作

树形结构是一种常用的数据结构，使用Vue怎么来渲染呢？要把树结构的每一个节点都渲染成dom，需要对树结构进行递归遍历。Vue组件可以通过name选项的设置来递归

叁歲伎倆/ 2022年05月21日 12:26/ 0 赞/ 366 阅读

相关 JAVA-简单树形结构

package com.qh.health.service; import com.alibaba.fastjson.JSON; import

野性酷女/ 2022年02月04日 12:11/ 0 赞/ 292 阅读

相关【Vue基础知识总结 5】Vue实现树形结构

一、前言开发过程中，涉及到多级菜单的应用，树形结构比较常见，今天就做了一个Spring Boot + Vue + Element-UI 实现树形结构的一个小demo。

- 日理万妓/ 2021年08月31日 04:01/ 0 赞/ 493 阅读