关于三级树形分类的解释(谷粒商城)

在学谷粒商城的时候,老师并没有给三级树形分类这块讲清楚,导致在拖拽这块很多人都有疑问,在仔细琢磨下,看了这篇文章,只要明白这两个点,那就能理解了。

层级和深度的关系:

  1. 第一级节点的层级是 0,深度是 3
    第二级节点的层级是 1,深度是 2
    第三级节点的层级是 2,深度是 1
let deep = Math.abs(this.maxLevel - draggingNode.level) + 1;

对于其中上面这行代码我们了解了层级和深度关系后就明白了,假设,我们该节点下有三级节点,那这时候我们要拖拽总节点层级是3的第一级节点,算出来的deep(也就是被拖动节点的深度),也就是2-0+1=3,和第一级节点的深度完美对应,如果这时候我们要拖拽总节点层级是3的第二级节点,算出来的deep(也就是被拖动节点的深度),也就是2-1+1=2,和第二级节点的深度完美对应
以此类推,就不多说了
然后结合elementui的属性我们进行判断

      if (type == "inner") {// 当拖拽到目标节点内部时(type == "inner")// 这时需要判断的是: 被拖动节点的深度 + 目标节点的深度 <= 3return deep + dropNode.level <= 3;} else {// 当拖拽到目标节点的同级时(type != "inner")// 这时需要判断的是: 被拖动节点的深度 + 目标节点的父节点的深度 <= 3return deep + dropNode.parent.level <= 3;}

最后,听懂点赞

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/797401.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于巴法云物联网云平台构建可视化控制网页(以控制LED为例)

0 前言 如今大大小小的物联网云平台非常多&#xff0c;但大部分要收取费用&#xff0c;免费的物联网云平台功能则有很多限制使用起来非常不方便。以百度云物联网云平台为例&#xff0c;它的物可视不支持发布主题&#xff0c;等于可视化界面只能作为数据监控而不具备双向通信的…

mysql dublewrite 双写缓存机制

mysql dublewrite 双写缓存机制&#xff0c;像不像主板双bois系统&#xff0c; 在MySQL的InnoDB存储引擎中&#xff0c;当进行数据写操作时&#xff0c;会先将数据写入到内存中的缓冲池&#xff08;Buffer Pool&#xff09;&#xff0c;然后异步刷新到磁盘上的数据文件。为了提…

大揭秘!产品经理待遇和发展前景

很多互联网从业人员都对产品经理不太了解&#xff0c;或者说不知道其发展前景到底如何&#xff1f;值不值得转岗或者从0开始进入学习&#xff0c;那么接下来我们来看看产品经理的发展前景到底如何呢&#xff1f; 产品经理就业现状 随着互联网行业的迅猛发展&#xff0c;产品经…

ElasticSearch 常用查询优化方式

设计阶段调优 1&#xff1a; 根据业务增量需求&#xff0c;采取基于日期模板创建索引&#xff0c;通过 roll over API 滚动索引&#xff1b; 2&#xff1a; 使用别名进行索引管理&#xff1b; 3&#xff1a; 每天凌晨定时对索引做 force_merge 操作&#xff0c;以释放空间&…

手写一个民用Tomcat (02)

01 我们已经完成了 基本玩具一样的Tomcat&#xff0c;可以实现这个功能&#xff0c;下面我们在规范一下。 先从我们的JxdResponse &#xff0c;JxdRequest 分别实现ServletRequest &#xff0c;和ServletResponse 注意下 没有用的到 重写方法我就 直接去掉了&#xff0c;你自…

摆动序列(力扣376)

文章目录 题目前知题解一、思路二、解题方法三、Code 总结 题目 Problem: 376. 摆动序列 如果连续数字之间的差严格地在正数和负数之间交替&#xff0c;则数字序列称为 摆动序列 。第一个差&#xff08;如果存在的话&#xff09;可能是正数或负数。仅有一个元素或者含两个不等元…

c++20协程详解(四)

前言 到这就是协程的最后一节了。希望能帮到大家 代码 到这里我们整合下之前二、三节的代码 #include <coroutine> #include <functional> #include <chrono> #include <iostream> #include <thread> #include <mutex> #include <me…

JWT/JWS/JWE

JWT(JSON Web Token)&#xff1a;一种基于JSON格式&#xff0c;用于在Web应用中安全传递用户身份验证和授权信息的标准令牌&#xff0c;可以包含签名(JWS)和加密(JWE)的信息 MacAlgorithm(Message Authentication Code Algorithm)&#xff1a;消息认证码算法 HMAC(Hash-based…

2024/4/1—力扣—两数相除

代码实现&#xff1a; 思路&#xff1a;用减法模拟除法 // 用减法模拟除法 int func(int a, int b) { // a、b均为负数int ans 0;while (a < b) { // a的绝对值大于等于b&#xff0c;表示此时a够减int t b;int count 1; // 用来计数被减的次数// t > INT_MIN / 2:防止…

力扣由浅至深 每日一题.23 Nim 游戏

不要美化自己当初没有选择的那一条路 —— 24.4.7 Nim 游戏 你和你的朋友&#xff0c;两个人一起玩 Nim 游戏&#xff1a; 桌子上有一堆石头。你们轮流进行自己的回合&#xff0c; 你作为先手 。每一回合&#xff0c;轮到的人拿掉 1 - 3 块石头。拿掉最后一块石头的人就是获胜者…

京东获得JD商品详情 API 接口(jd.item_get)的详细使用说明,包括如何通过该接口获取商品的基本信息,包括名称、品牌、产地、规格参数等

通过调用京东商品详情API接口&#xff0c;开发者可以获取商品的基本信息&#xff0c;如名称、品牌、产地、规格参数等。此外&#xff0c;还可以获取商品价格信息&#xff0c;包括原价、促销价和活动信息等。同时&#xff0c;该接口还支持获取商品的销量、评价、图片、描述等详细…

IO学习笔记

1 什么是IO 对于任何程序设计语言而言&#xff0c;输入输出(Input/Output)系统都是非常核心的功能。程序运行需要数据&#xff0c;数据的获取往往需要跟外部系统进行通信&#xff0c;外部系统可能是文件、数据库、其他程序、网络、IO设备等等。外部系统比较复杂多变&#xff0…

微信如何识别图片中的文字?3个文字识别技巧分享

微信如何识别图片中的文字&#xff1f;微信识别图片中的文字是一项非常实用的功能&#xff0c;特别是在需要快速提取图片中的信息时。不仅如此&#xff0c;微信识别图片文字的功能也极大地提升了人们的工作和学习效率。在办公场景中&#xff0c;它可以快速将纸质文档、名片、合…

postgresql数据库|数据整合的好工具--Oracle-fdw的部署和使用

概述 Oracle_fdw 是一种postgresql外部表插件&#xff0c;可以读取到Oracle上面的数据。是一种非常方便且常见的pg与Oracle的同步数据的方法 Oracle_fdw 适用场景&#xff1a; Oracle_fdw 是一个开源的 Foreign Data Wrapper (FDW)&#xff0c;主要用于在 PostgreSQL 数据库中…

【PRO3.0 】电子面单模版请求失败问题处理

注意&#xff1a;&#xff1a;改完重启守护进程 1、文件地址&#xff1a;crmeb/services/express/storage/Express.php 行数 202 行左右&#xff0c; 方法名&#xff1a;temp() 如下如图把 POST 改成 GET 2、crmeb/services/HttpService.php 行数&#xff1a;81 行左右 方…

【MySQL】解决修改密码时报错:--skip-grant-tables option

首先我们先了解到为何会出现如上报错&#xff1a; 是因为我们在第一次配置MySQL中的my.cnf时&#xff0c;我们添加了–skip–grant-tables 选项 跳过验证身份的选项 所以&#xff0c;我们第一次登录成功后想要修改密码会出现如下报错&#xff1a; [hxiZ0jl69kyvg0h181cozuf5Z…

Vue3:自定义响应式数据-customRef(面试常问,重点!!!)

一、情景说明 我们知道&#xff0c;Vue的响应式数据效果就是&#xff0c;页面和变量的关联效果 页面一修改变量值&#xff0c;引用变量的地方就会同时更新 那么&#xff0c;假设我们有这样一个需求&#xff0c;就是&#xff0c;让响应式变量在页面修改后&#xff0c;过2秒&am…

使用Springfox Swagger实现API自动生成单元测试

目录 第一步&#xff1a;在pom.xml中添加依赖 第二步&#xff1a;加入以下代码&#xff0c;并作出适当修改 第三步&#xff1a;在application.yaml中添加 第四步&#xff1a;添加注解 第五步&#xff1a;运行成功之后&#xff0c;访问相应网址 另外&#xff1a;还可以导出…

UI自动化框架搭建以及面试题详解(上)

UI自动化框架搭建以及面试题 UI自动化面试题框架面试题那你讲下如何搭建现成的框架公司里面的框架是你搭建的么请结合你的项目讲解一下你的框架是如何搭建的 PO模式什么是 PO 模式PO 模式的封装原则有哪些 DDT驱动模式什么的项目适合ddt ddt四种模式ddt处理各种类型数据 自动化…

Lesson 9 Transformer

听课&#xff08;李宏毅老师的&#xff09;笔记&#xff0c;方便梳理框架&#xff0c;以作复习之用。本节课主要讲了seq2seq model简介&#xff0c;以及应用&#xff0c;架构&#xff08;包括encoder和decoder&#xff0c;encoder和decoder之间如何协作&#xff09;&#xff0c…