谷粒商城实战笔记-54-商品服务-API-三级分类-拖拽效果

文章目录

  • 一,54-商品服务-API-三级分类-修改-拖拽效果
    • 1,el-tree控件加上允许拖拽的属性
    • 2,是否允许拖拽
    • 3,完整代码

在这里插入图片描述

一,54-商品服务-API-三级分类-修改-拖拽效果

本节的主要内容是给三级分类树形结构加上拖拽功能,并且根据分类不能大于三级的规则判断是否能拖拽。

1,el-tree控件加上允许拖拽的属性

el-tree控件加上允许拖拽的属性draggable,此外还需要根据层级判断是否能拖动,通过给allow-drop绑定事件allowDrag实现这个需求。
在这里插入图片描述

	allowDrag(draggingNode, dropNode, dropPosition) {console.log(draggingNode, dropNode, dropPosition);return true},

在 Element UI(El-UI)的树组件 el-tree 中,allow-drop 事件是一个自定义槽函数,用于控制是否允许将一个节点拖放到另一个节点上。这个函数接受三个参数,分别代表正在拖动的节点、可能的放置目标节点以及放置位置。这三个参数具体如下:

  1. draggingNode:
    这个参数是 TreeNode 类型的对象,表示当前正在被拖动的节点。它包含了关于拖动节点的所有信息,如节点的数据、状态等。

  2. dropNode:
    同样是 TreeNode 类型的对象,表示潜在的放置目标节点。这是你可能要将 draggingNode 放置到的节点。如果拖动过程中没有特定的放置目标(例如,拖动到树的空白区域),这个参数可能是 undefined 或者不适用。

  3. dropPosition:
    表示相对于 dropNode 的放置位置。这是一个字符串,可以是 'before''after''inner',分别表示拖动的节点将放置在目标节点之前、之后或内部。如果 dropNodeundefined,则这个参数可能表示放置在树的顶部或底部。

allow-drop 函数应该返回一个布尔值,指示是否允许进行拖放操作。如果返回 true,则允许拖放;如果返回 false,则阻止拖放操作。例如,在你的代码中:

接下来实现这个函数的逻辑。

原则是当前拖动的阶段到达要放置的位置后,层级数不能超过3,所以核心有3点:

  • ①计算出以拖动结点为根结点的子树的深度deep。
  • ②结合目标结点的深度及放置位置的类型,判断新位置的层级level。
  • ③deep + level <=3 时允许拖动。

关于第②点,新位置的类型可能有三种:

  • prev,目标节点的前面
  • inner,目标节点的子节点
  • next,目标节点的后面

2,是否允许拖拽

递归统计draggingNode子树的深度。

	// 递归计算draggingNode子树的深度countDraggingNodeDeep(draggingNode) {var deep = 0;if (draggingNode.childNodes && draggingNode.childNodes.length > 0) {debuggerdraggingNode.childNodes.forEach(child => {deep = Math.max(deep, this.countDraggingNodeDeep(child));});}return deep + 1;},

结合draggingNode子树的深度和位置判断是否能拖动。

	allowDrag(draggingNode, dropNode, dropPosition) {console.log(draggingNode, dropNode, dropPosition);var deep = this.countDraggingNodeDeep(draggingNode);console.log(deep,  dropNode.data.catLevel + deep);// 根据dropPosition结合dropNode.catLevel来判断draggingNode新位置的位置是否合法if (dropPosition === "prev" || dropPosition === "next") {return dropNode.data.catLevel + deep - 1 <= 3;} else if (dropPosition === "inner" ) {return dropNode.data.catLevel + deep <= 3;}},

3,完整代码

<template><div><el-treenode-key="catId":data="menus":props="defaultProps":expand-on-click-node="false"show-checkbox:default-expanded-keys="expandedKeys":allow-drop="allowDrag"draggable><span class="custom-tree-node" slot-scope="{ node, data }"><span>{{ node.label }}</span><span><el-buttonv-if="node.level <= 2"size="mini"@click="() => append(data)">Append</el-button><el-buttonsize="mini"@click="() => edit(data)">Edit</el-button><el-buttonv-if="node.childNodes.length == 0"type="text"size="mini"@click="() => remove(node, data)">Delete</el-button></span></span></el-tree><el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" :close-on-click-modal=false><el-form :model="category"><el-form-item label="分类名称"><el-input v-model="category.name" autocomplete="off"></el-input></el-form-item><el-form-item label="图标"><el-input v-model="category.icon" autocomplete="off"></el-input></el-form-item><el-form-item label="计量单位"><el-input v-model="category.productUnit" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="submitCategory">确 定</el-button></div></el-dialog></div>
</template><script>
export default {components: {},props: {},data() {return {dialogTitle: "", // 编辑窗口标题,新增分类,修改分类dialogType: "", // 编辑窗口类型,create表示append,edit表示editdialogFormVisible: false,menus: [],category: {name: "", parentCid: 0, catLevel: 0, sort: 0, showStatus: 1, icon: "", productUnit: "", catId: null},expandedKeys: [],defaultProps: {children: "children",label: "name",},};},methods: {allowDrag(draggingNode, dropNode, dropPosition) {console.log(draggingNode, dropNode, dropPosition);var deep = this.countDraggingNodeDeep(draggingNode);console.log(deep,  dropNode.data.catLevel + deep);// 根据dropPosition结合dropNode.catLevel来判断draggingNode新位置的位置是否合法if (dropPosition === "prev" || dropPosition === "next") {return dropNode.data.catLevel + deep - 1 <= 3;} else if (dropPosition === "inner" ) {return dropNode.data.catLevel + deep <= 3;}},// 递归计算draggingNode子树的深度countDraggingNodeDeep(draggingNode) {var deep = 0;if (draggingNode.childNodes && draggingNode.childNodes.length > 0) {debuggerdraggingNode.childNodes.forEach(child => {deep = Math.max(deep, this.countDraggingNodeDeep(child));});}return deep + 1;},append(data) {console.log(data);this.dialogType = "create";this.dialogTitle = "新增分类";this.dialogFormVisible = true;this.category = {name: "",parentCid: data.catId,catLevel: data.level + 1,sort: 0,showStatus: 1};},edit(data) {console.log(data);this.dialogType = "edit";this.dialogTitle = "修改分类";this.dialogFormVisible = true;// 根据catId查询最新数据this.$http({url: this.$http.adornUrl(`/product/category/info/${data.catId}`),method: "get",data: this.$http.adornData({ catId: data.catId }, false),}).then(({ data }) => {if (data && data.code === 0) {this.category = {...data.data };} else {this.$message.error(data.msg);}});},submitCategory() {if (this.dialogType === "create") {this.addCategory();} else if (this.dialogType === "edit") {this.updateCategory();}},updateCategory() {var {catId, name, icon, productUnit } = this.categoryconsole.log( this.category);this.$http({url: this.$http.adornUrl("/product/category/update"),method: "post",data: this.$http.adornData({catId, name, icon, productUnit }, false),}).then(({ data }) => {if (data && data.code === 0) {this.$message({message: "修改成功",type: "success",duration: 1500,onClose: () => {console.log("修改成功,关闭消息提示");this.dialogFormVisible = false;this.getMenus(); // 重新获取数据this.expandedKeys =[ this.category.parentCid == 0 ? this.category.catId : this.category.parentCid ]; // 重置展开节点console.log(this.expandedKeys);},});} else {this.$message.error(data.msg);}});},addCategory() {this.$http({url: this.$http.adornUrl("/product/category/save"),method: "post",data: this.$http.adornData(this.category, false),}).then(({ data }) => {if (data && data.code === 0) {this.$message({message: "添加成功",type: "success",duration: 1500,onClose: () => {console.log("添加成功,关闭消息提示");this.dialogFormVisible = false;this.getMenus(); // 重新获取数据this.expandedKeys =[ this.category.parentCid ]; // 重置展开节点},});} else {this.$message.error(data.msg);}});},remove(node, data) {console.log(node, data);var ids = [node.data.catId];this.$confirm(`确定对[id=${ids.join(",")}]进行[${ids.length == 1 ? "删除" : "批量删除"}]操作?`,"提示",{confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {this.$http({url: this.$http.adornUrl("/product/category/delete"),method: "post",data: this.$http.adornData(ids, false),}).then(({ data }) => {if (data && data.code === 0) {this.$message({message: "操作成功",type: "success",duration: 1500,onClose: () => {console.log("删除成功,关闭消息提示");this.getMenus(); // 重新获取数据this.expandedKeys = [ node.parent.data.catId ]; // 重置展开节点},});} else {this.$message.error(data.msg);}});}).catch(() => {});},// 获取分类数据getMenus() {this.dataListLoading = true;this.$http({url: this.$http.adornUrl("/product/category/list/tree"),method: "get",}).then(({ data }) => {console.log(data);this.dataListLoading = false;this.menus = data.data;});},},created() {this.getMenus(); // 获取分类数据},
};
</script>
<style scoped>
</style>

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

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

相关文章

Mysql 集群搭建 05

文章目录 1. Mysql主从复制集群搭建1.1 主库配置1.2 从库配置 2. 分库分表2.1 拆分策略2.2 实现技术2.2.1 MyCat概述2.2.2 MyCat入门2.2.3 配置 schema.xml 3. 双主双从4. 双主双从读写分离 1. Mysql主从复制集群搭建 主从复制是指将主数据库的 DDL 和 DML 操作通过二进制日志…

Dubbo 参数调优指南

在现代微服务架构中&#xff0c;Apache Dubbo 是一款高性能的 Java RPC 框架&#xff0c;它提供了丰富的功能来支持大规模分布式系统的构建。为了确保 Dubbo 服务能够在高并发环境中稳定运行&#xff0c;性能调优是不可忽视的重要环节。本文将深入探讨 Dubbo 的参数调优策略&am…

【知识图谱】人工智能之知识图谱的详细介绍

知识图谱&#xff08;Knowledge Graph&#xff09;作为一种新型的知识表示和组织方式&#xff0c;正逐渐成为信息领域的研究热点。以下是对知识图谱的详细介绍&#xff1a; 一、定义与概念 知识图谱以结构化的形式描述客观世界中概念、实体及其关系&#xff0c;将互联网的信息…

uniapp实现表格的多选功能

记录一下最近在做一个的表格数据多选功能。需求大致为支持多选、支持跨分页的连续选择、支持通过查询框后手动选择数据&#xff08;我是后端选手&#xff0c;前端不太熟悉单纯记录~&#xff09;。 主要思路为&#xff1a; 将table中的唯一id&#xff0c;存入数组tableIds中进…

金融业的等保测评实践与成效:以实际案例为鉴

在数字化浪潮席卷全球的今天&#xff0c;金融业作为信息密集型的行业&#xff0c;其信息安全与业务连续性面临着前所未有的挑战。为了确保金融数据的安全性和业务的稳健运行&#xff0c;金融业积极响应国家信息安全等级保护制度&#xff08;简称“等保”&#xff09;&#xff0…

VMware Cloud Foundation ESXi 主机

一、准备嵌套 ESXi 主机环境# 1)物理 ESXi 主机信息 本次准备用于部署 VCF 嵌套实验环境的物理宿主机的配置信息如下图所示。其实,部署 VCF 环境主要对内存的大小要求比较高,部署完整的管理域相关组件下来差不多就要占用 200 GB左右内存,而对 CPU 和存储的需求可以根据实…

Pytorch使用教学8-张量的科学运算

在介绍完PyTorch中的广播运算后&#xff0c;继续为大家介绍PyTorch的内置数学运算&#xff1a; 首先对内置函数有一个功能印象&#xff0c;知道它的存在&#xff0c;使用时再查具体怎么用其次&#xff0c;我还会介绍PyTorch科学运算的注意事项与一些实用小技巧 1 基本数学运算…

idea中项目目录,文件显示不全问题

问题&#xff1a;idea中项目目录显示不全问题 解决办法1&#xff1a; 删除目录中的.idea文件 用idea重新打开文件就行了 办法2&#xff1a;手动导入为maven项目 1. 2. 3. 4.选择要导入的项目&#xff0c;导入为maven

在英特尔 Gaudi 2 上加速蛋白质语言模型 ProtST

引言 蛋白质语言模型 (Protein Language Models, PLM) 已成为蛋白质结构与功能预测及设计的有力工具。在 2023 年国际机器学习会议 (ICML) 上&#xff0c;MILA 和英特尔实验室联合发布了ProtST模型&#xff0c;该模型是个可基于文本提示设计蛋白质的多模态模型。此后&#xff0…

昇思25天学习打卡营第22天|Pix2Pix实现图像转换

Pix2Pix图像转换学习总结 概述 Pix2Pix是一种基于条件生成对抗网络&#xff08;cGAN&#xff09;的深度学习模型&#xff0c;旨在实现不同图像风格之间的转换&#xff0c;如从语义标签到真实图像、灰度图到彩色图、航拍图到地图等。这一模型由Phillip Isola等人在2017年提出&…

【组件协作】模板方法

文章目录 模板方法总体划分重构组件协作模式——模板方法动机代码——做法一代码——做法二对比定义缺点总结 其他 模板方法 总体划分 设计模式的总体分类&#xff1a; 目的&#xff1a; 创建型&#xff1a;解决对象创建的工作结构型&#xff1a;对象在需求变化对结构的冲击…

编写Hello World!,开启cpp人生

一、具体步骤 1.、安装Visual Studio2019(网上教程很多&#xff09;并打开。 2、新建项目 首先配置新项目 其中 解决方案包含项目 然后添加cpp文件并编写代码 代码如下 #include <iostream> using namespace std; int main() {cout << "Hello World~&qu…

electron TodoList网页应用打包成linux deb、AppImage应用

这里用的是windows的wsl的ubuntu环境 electron应用打包linux应用需要linux下打包&#xff0c;这里用windows的wsl的ubuntu环境进行操作 1&#xff09;linux ubuntu安装nodejs、electron 安装nodejs&#xff1a; sudo apt update sudo apt upgrade ##快捷安装 curl -fsSL http…

[Day 35] 區塊鏈與人工智能的聯動應用:理論、技術與實踐

區塊鏈的分布式存儲技術 區塊鏈技術自2008年比特幣白皮書發表以來&#xff0c;已經成為一種革命性的技術&#xff0c;帶來了許多創新。區塊鏈本質上是一個去中心化的分布式賬本&#xff0c;每個節點都持有賬本的副本&#xff0c;並參與記錄和驗證交易。分布式存儲是區塊鏈的重…

在SAP中创建主数据的常用BAPI

科目主数据: BAPI_FINANCIAL_ACCOUNTING_DOCUMENT_CREATE &#xff1a;用于创建财务会计凭证。 成本中心: BAPI_COSTCENTER_CREATEMULTIPLE &#xff1a;用于创建多个成本中心。BAPI_COSTCENTER_CHANGEMULTIPLE &#xff1a;用于修改多个成本中心。 利润中心: BAPI_PROFITCEN…

机器学习驱动的智能化电池管理技术与应用

目录 主要内容 电池管理技术概述 电池的工作原理与关键性能指标 电池管理系统的核心功能 SOC估计 SOH估计 寿命预测 故障诊断 人工智能机器学习 基础 人工智能的发展 机器学习的关键概念 机器学习在电池管理中的应用案例介绍 人工智能在电池荷电状态估计中的…

小猪佩奇.js

闲着没事 使用js 画一个小猪佩奇把 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</tit…

力扣第三十三题——搜索旋转排序数组

内容介绍 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], ..., nums[n-1], nums[0], num…

UDP进行端口转发时,数据丢失率太高怎么办

在网络通信中,UDP (用户数据报协议) 因其低延迟和高效率而被广泛使用。然而,当使用UDP进行端口转发时,我们可能会遇到数据丢失率高的问题。本文将探讨这个问题的原因及其解决方案,特别关注如何通过调整缓冲区大小来改善情况。 问题根源 UDP数据包丢失可能由多种因素导致,包括…

UDP/TCP协议解析

我最近开了几个专栏&#xff0c;诚信互三&#xff01; > |||《算法专栏》&#xff1a;&#xff1a;刷题教程来自网站《代码随想录》。||| > |||《C专栏》&#xff1a;&#xff1a;记录我学习C的经历&#xff0c;看完你一定会有收获。||| > |||《Linux专栏》&#xff1…