Vue中树形结构简单实现

怼烎@ 2022-05-25 20:59 232阅读 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 条评论，232人围观）

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

相关阅读

相关 vue list 递归显示树形结构

vue list 递归显示树形结构 tree 方法递归返回parentId下的所有子 tree (parentId) { const tre

左手的ㄟ右手/ 2023年06月16日 10:53/ 0 赞/ 33 阅读

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

[https://www.jianshu.com/p/5c7f7b8f96d2][https_www.jianshu.com_p_5c7f7b8f96d2] [https_

短命女/ 2023年02月10日 03:34/ 0 赞/ 31 阅读

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

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

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

相关 Qt QTreeWidget 树形结构实现 .

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

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

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

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

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

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

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

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

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

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

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

相关 Vue树形结构操作

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

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

相关 JAVA-简单树形结构

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

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

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

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

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