使用递归生成一个树形组件

最新推荐文章于 2022-06-15 17:14:52 发布
最新推荐文章于 2022-06-15 17:14:52 发布
阅读量616 收藏
点赞数
文章标签： c# sqlserver
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52606263/article/details/123788164
版权

在最近做到一个项目，有一个需求，要求我根据数据库中的商品类型表中的数据生成一个多级树形组件。

 

如上图所示，在开始部署项目时，我并没有太关注这个需求，在数据库设计阶段，由于我是第一次做这个树形组件，我就做了两个商品类型表。后来我们做这个树形组件时，发现我只能生成两级的树形组件，如果是三级四级的树形组件就不能使用这种方式。

我是这样解决这个问题的，我就使用一个表来实现这个需求。

 

我重新对数据库中的商品类型表进行了修改，在Parent属性中我就存放进这个商品类型的上级类型ID值，根据这个ID值判断是什么类型是它的父级。而一级(最大的类型)就使用0来表示是最大的类型。

 

当这个表设计完成后，又有一个疑问。该怎么实现这个功能呢?这时候我想到了递归(简单来说:就是在一个方法中调用自身，这个要注意的是要有一个终止方法的条件，不然就是一个死循环了)。

 

我先创建一个类，这个类中 title属性就是它当前级别的名称，而List<LayuiTree>集合中存储可能存在多个的下级信息

后端代码：

 

前端代码，我在前端偷了个懒，使用的是Layui插件中的树形组件。具体可以在Layui插件官网中进行查看

 

 

她与疾風
关注
使用递归生成layui插件中的树形组件
weixin_52606263的博客
11-28 1036
我们在一些程序中你获取可以一种树形组件，例如： 这是在layui插件中生成的一个树形组件，他是由后端生成数据，将后端数据返回给前台页面时，自动生成的一个树形组件。 但在使用过程中，我们需要考虑到数据库中的设计因素，在这个例子中，我使用的数据库中的数据是一个表格，它可以方便我们生成多级树形组件。而如果你使用了多表来存放这个树形组件的数据，反而会变得非常繁琐。 因此我们数据库中的数据是这样的: 用多一个值来记录它的上级元素的ID值，这样在生成多级树形时，可以分清主次关系。 这是前.
vue 循环 递归组件_vue2 递归组件--树形
weixin_39650091的博客
12-23 497
递归组件，官方给的教程太简便了，根本看不出到底怎么用。于是自己查网摸索了一下，这儿只把核心思想写出来。效果如下图，点击后打开二级菜单，再点击后打开三级。//js//引子//思想：当v-if=‘false’时，循环时进行的。所以一开始就设置为false。 ggg:{name:'gs',template:`我是p标签 //这儿show必须要初始值为false，不然就是堆栈溢出，死循环。　　　　　...
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
10-17
也是我自己开发的从无到有的过程，所以它可以为你提供一些Tree组件开发的思路，本文重点给大家介绍vue递归组件的简单实现，感兴趣的朋友跟随小编一起看看吧
vue递归组件简单实现一个树形组件
海阔天空
11-14 578
<template> <div class="list-wrap"> <div v-for="item of list" :key="item.title" class="item" > <div class="item-title-wrap" @click="onItemClick(item)" > <div class=".
java tree 树形数据 递归 组装
hanjiaqian的博客
01-11 619
"[" + "{id: 7,name:'佘山', pid:2}," + "{id: 8,name:'九亭', pid: 2}," + "{id: 9,name:'松江南站', pid: 2}," + "{id: 13,name:'汶水路', pid:4}," + "{id: 14,name:'延长路', pid:4}," + "{id: 15,name:'富锦路', pid: 4}," + "{id: 5,name:'赤峰路', pid:1}," + "{id: 6,name:'友谊路',pid: 1...
java递归查询树形菜单（递归中查询）
蔡定努
09-07 1万+
public List<Map<String, Object>> tree() { //查询出所有的一级菜单[pid=0为一级菜单] List<Menu> treeMenu = menuServiceImpl.selectByPid(0); List<Map<String, Object&gt...
递归实现树结构封装
qq_43419105的博客
08-27 521
这里写自定义目录标题简介代码实现 简介 作为一名两年的程序猿,每每需要用到递归的都要头疼一番,所以今天就再这里写一个案例,记录一下自己递归实现树结构的封装. 代码实现 1.DataSourceTreeDomain.java用于返回给页面展示 @Data public class DataSourceTreeDomain { @ApiModelProperty(value = "ID") private Long id; @ApiModelProperty(value = "元数据
微信小程序树形组件微信小程序树形组件
最新发布
06-21
在树形组件中，我们需要一个自定义组件来表示每个树节点，然后通过递归渲染这些节点，形成层次结构。 1. **自定义组件**： 自定义组件的定义包括`properties`（属性）、`data`（数据）、`methods`（方法）等部分。...
Vue2递归组件实现树形菜单
11-26
今天看了老长时间递归组件，官方给的教程太简便了，根本看不出到底怎么用。于是自己查网摸索了一下，这儿只把核心思想写出来。 效果如下图，点击后打开二级菜单，再点击后打开三级。 //js //引子 //思想：当v-if=...
vue 递归实现树形组件
Beryl2580的博客
04-22 2668
先来看一下效果： 代码部分 （myTree.vue） 图片部分可以自己引一下自己的图片，或者使用iconfont的css引入。 <template> <div class="tree"> <ul class="ul"> <li v-for="(item,index) of treeMenu" :key...
使用JS递归形成树结构的数据
weixin_45415885的博客
08-31 1563
有时前端需要渲染菜单树的时候，我们拿到的数据可能不是我们想要的格式，所以需要将数据的结构进行特定的格式化。 先看一下原始数据： [ { id: '1', title: '分类', }, //一级 {id: '1_1', title: '家电', pid: '1'}, //二级 {id: '1_2',title: '服饰',pid: '1' }, //二级 {id...
[Vuejs]手把手教你创建递归树组件(附完整demo)
weixin_34186128的博客
07-08 1274
算法学习中，递归和迭代是一对孪生兄弟。下面我们就用递归来完成vue中的组件递归。也将认识到组件的递归，实际上就是数据递归的外在形式。所以我们完成组件的递归，最重要的还是定义好可以递归的数据结构。Here we go. 下面我们在VueJS里创建一个递归树组件，完整的Demo请戳这里 创建一个树组件 树组件的结构可以想像成文件目录 + 根目录 + 目录A + 目录A1 ...
Vue 递归组件
大灰狼的小绵羊哥哥的博客
12-09 6721
对于一些有规律的DOM结构，如果我们再一遍遍的编写同样的代码，显然代码是比较繁琐和不科学的，而且自己的工作量会大大增加， 那么有没有一种方法来解决这个问题呢？ 答案是肯定的，我们可以通过 递归 方式来生成这个结构，当然在 Vue 模板中也是可以实现的，我们可以在 Vue 的组件中调用自己本身，这样就能达到目的。 当然，在 Vue 中，组件可以递归的调用本身，但是有一些条件： 该组件一定要有 name 属性 要确保递归的调用有终止条件，防止内存溢出 为了方便理解递归组件，我写了一个小小的 Demo：
vue递归组件—开发树形组件Tree--(构建树形菜单)
我总是词不达意的博客
06-15 1万+
vue递归组件—开发树形组件Tree--(构建树形菜单)
算法【递归】——前端实践：树形控件
熊米
11-05 1224
需求描述：将一维数组通过递归生成el-tree所需要的树形结构数组。 效果如下： <template> <div> <el-tree :data="treeData" node-key="id" @check="check" :default-checked-keys="checkedKeys" show-checkbox /> </div> </template&gt
树形组件（可动态添加属性、无限嵌套）及递归展示tree数据
程邓楠的博客
07-11 923
前言： 公司的业务要求，做一个动态添加子属性或统计属性的一个业务，网上没有找到特别合适的，就自己参考了一些demo做了一个小组件，希望大佬们可以多多留言指点！ 1、做法 要实现动态的渲染我们拿到的不知道有几层的菜单数据，有两种解决方案： 操作 dom 去一层一层 添加子菜单（vue 不推荐操作 dom，所以不推荐此方案） 将我们的菜单封装到组件中，通过递归组件实现菜单渲染 具体效果如下图： 2、数据 options: [ { id: "473d..
用vue递归组件写树形控件
王永存
05-11 2499
最近移动端H5项目有树级选择需求，网上没有找到好用的插件，于是参照着网上的教程和Vue官网自己写了一个。效果如图所示： 组件在它的模板内可以递归地调用自己，只有当它有name选项时才可以。 模拟数据格式如下： dataList = [{ nodeName: "电能耗模型", child: [{ nodeName: '园区', ...
vue递归组件怎么使用，手写递归组件tree下拉列表。
qq_54753561的博客
06-12 1640
vue递归组件怎么使用，手写递归组件tree下拉列表。引入要递归的组件，在它的模板内可以递归地调用自己，不过，只有当它有name选项时才可以。一定要设置name属性也就是组件的名字。
VUE-开发一个树形结构组件（组件递归）
热门推荐
课后笔记
12-08 1万+
需求 一个页面，要显示商品分类，同时每个分类下面还拥有若干子类，子类也可以有子类。 要实现全选单选，子类被逐个全选父类也要标记选中。 第一反应就是树形结构，和递归调用。曾经在做WPF时记得有现成的组件，也学着写过对应的后台。这次我要自己写一个前端的组件了。 这只是我自己花了点时间写的一个vue组件，尚可优化及拓展。仅此与大家分享一下。 效果 实现 &amp;lt;template&amp;gt; &amp;lt;di...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值