当前位置: 首页 > news >正文

Vue3问题:如何实现级联菜单的数据懒加载?

前端功能问题系列文章,点击上方合集↑

序言

大家好,我是大澈!

本文约3100+字,整篇阅读大约需要5分钟。

本文主要内容分三部分,第一部分是需求分析,第二部分是实现步骤,第三部分是问题详解。

如果您只需要解决问题,请阅读第一、二部分即可。

如果您有更多时间,进一步学习问题相关知识点,请阅读至第三部分。

1. 需求分析

实现级联菜单效果,点击一级菜单某一项,就会加载出对应的二级菜单内容,点击二级菜单某一项,就会加载出对应的三级菜单内容,以此类推,最后一级为五级菜单。

对于加载而言,必须是懒加载效果,即点击菜单某一项时,才会真正去请求加载对应的下一级菜单内容。

对于菜单最后一级内容,要插入一个输入框,在输入框内,用户可以任意输入版本号,并且要求输入框不可被选中。

当然,我们的正题是数据的懒加载,级联菜单中插入不可被选中的输入框实现算是附加内容了。

图片

图片

2. 实现步骤

2.1 为什么要使用数据懒加载

在项目中,我们使用数据的懒加载,会有如下好处

  • 提升用户体验

  • 减少初始加载时间

  • 减轻网络资源的消耗

了解了这些好处之后,再就是要了解数据懒加载的应用场景。

这部分比较有用,所以多叙述一些。

数据懒加载在以下场景中特别有用:

  • 长列表或分页数据:当你有一个包含大量数据的列表或分页功能时,可以使用数据懒加载来延迟加载列表项或分页数据。只有当用户滚动到可见范围时才加载新的数据,从而提高初始加载速度和响应性能。

  • 图片或媒体资源:对于包含大量图片或媒体资源的页面,可以使用数据懒加载来延迟加载这些资源。只有当图片或媒体元素进入视口时才进行加载,从而减少初始加载时间和网络资源的消耗。

  • 条件性加载:当一些数据或组件只在特定条件下才需要显示或使用时,可以使用数据懒加载。根据条件动态加载数据或组件,避免不必要的加载和资源占用。

  • 路由级别的懒加载:在Vue的路由中,可以使用懒加载来按需加载路由组件。只有当用户访问某个路由时才进行组件的加载,提高初始加载速度和路由切换的性能。

  • 异步加载模块:对于大型的Vue项目,可以使用数据懒加载来异步加载模块,减少初始加载时间。将模块分割成小块,并在需要时按需加载,提高应用的性能和可维护性。

上述场景在此部分只做简单描述,如果你有空余时间,各个场景具体代码实例请见第三部分总结。

我们这次的需求实现,就是符合第1条场景。

2.2 数据懒加载代码实例

当选中某一级时,动态加载该级下的选项。

通过lazy开启动态加载,并通过lazyload方法来设置加载数据源。

  • lazyload方法有两个参数,第一个参数node为当前点击的节点,第二个resolve为数据加载完成的回调(必须调用)。

  • node可以解构出level参数,它从0开始计数,指明当前点击节点的层级。

  • 为数据对象添加leaf属性,是为了指明哪一级的对象是叶子节点。

模板代码:

<template><!-- 级联面板 --><el-cascader-panel :props="props"></el-cascader-panel>
</template>

逻辑代码:

<script setup>// 级联面板配置项const props = reactive({// 开启懒加载lazy: true,// 懒加载加载数据源方法async lazyLoad(node, resolve) {const { level } = node;// 已经有数据了,不需要重复请求了if (node.children && node.children.length > 0) return;// 模拟掉接口setTimeout(() => {let result;switch (level) {case 0: // 一级目录result = [{value: "0",label: "行内转账-手机号",children: []},{value: "1",label: "行内转账-银行账号",children: []},{value: "2",label: "汇款到当地银行",children: []},{value: "3",label: "汇款到钱包",children: []},{value: "4",label: "转账到CUPD",children: []}];break;case 1: //二级目录// 省略此处代码...break;case 2: //三级目录// 省略此处代码...break;case 3: //四级目录// 省略此处代码...break;case 4: // 五级目录result = [{value: "最低系统版本",label: "最低系统版本要求"},{value: "0",label: "不启用"},{value: "1",label: "内测"},{value: "2",label: "上线"}];// 设置五级菜单为叶子节点,无子节点result.forEach((item) => {item.leaf = level >= 4;});break;default:result = [];break;}resolve(result);}, 1000);}});
</script>

2.3 插入输入框代码实例

通过插槽和条件判断,在级联面板中插入输入框,其中data.label为节点对象的名称。

通过@click.stop阻止事件冒泡、宽度为父元素的100%、以及清除级联面板组件一些默认样式,实现了输入框不可被选中的效果。

模版代码:

<template><!-- 级联面板 --><el-cascader-panel :props="props"><template #default="{ data }"><!-- 输入框节点对象 --><div v-if="data.label == '最低系统版本要求'" @click.stop style="width: 100%"><div>{{ data.label }}</div><div class="searchText"><el-input v-model="searchText" :placeholder="'最低系统版本要求'"></el-input></div></div><div v-else><div>{{ data.label }}</div></div></template></el-cascader-panel>
</template>

样式代码:

<style lang="scss" scope>
.el-cascader-panel.is-bordered {border: none;}
.el-cascader-menu:last-child .el-cascader-node:nth-of-type(1):has(.searchText) {margin-bottom: 30px;padding: 0;&:hover,&:focus {background: #fff;}
}
.el-cascader-menu__list {padding: 20px 0;
}
</style>

3. 问题详解

3.1 关于CascaderProps配置项的参数一览

图片

3.2 懒加载各个场景代码实例总结

长列表或分页数据懒加载:

<template><div><ul><li v-for="item in items" :key="item.id">{{ item.name }}</li><li v-if="loading">Loading...</li></ul></div>
</template>
<script>
export default {data() {return {items: [],loading: false,};},mounted() {this.loadMore(); // 初始加载window.addEventListener('scroll', this.handleScroll);},methods: {loadMore() {this.loading true;// 模拟异步加载数据setTimeout(() => {const newItems = /* 请求新数据 */;this.items = this.items.concat(newItems);this.loading = false;}, 1000);},handleScroll() {const scrollPosition = window.innerHeight + window.pageYOffset;const contentHeight = document.documentElement.scrollHeight;if (scrollPosition >= contentHeight && !this.loading) {this.loadMore(); // 滚动到底部时加载更多数据}},},beforeDestroy() {window.removeEventListener('scroll', this.handleScroll);},
};
</script>

图片懒加载:

<template><div><img :src="placeholder" ref="image" style="display: none;"></div>
</template>
<script>
export {data() {return {placeholder: require('@/assets/placeholder.png'), // 占位图};},mounted() {window.addEventListener('scroll', this.handleScroll);},methods: {handleScroll() {const imageElement = this.$refs.image;const rect = imageElement.getBoundingClientRect();if (rect.top < window.innerHeight) {const src = /* 获取图片真实地址 */;imageElement.src = src; // 加载图片window.removeEventListener('scroll', this.handleScroll); // 图片加载后移除滚动监听}},},beforeDestroy() {window.removeEventListener('scroll', this.handle);},
};
</script>

条件性数据懒加载:

<template><div><button @click="showData = true">显示数据</button><div v-if="showData"><!-- 显示数据的组件或内容 --></div></div>
</template>
<script>
export default {data() {return {showData: false,};},
};
</script>

路由懒加载(基于 Vue Router):

const Home = () => import('./components/Home.vue');
const About = () => import('./components/About.vue');
const Contact = () => import('./components/Contact.vue');const routes = [{ path: '/home', component: Home },{ path: '/about', component: About },{ path: '/contact', component: Contact },
];const router = new VueRouter({routes,
});

异步加载模块(基于 import() 动态导入语法):

<template><div><button @click="loadModule">加载模块</button><div v-if="moduleLoaded"><!-- 显示已加载的模块 --></div></div>
</template>
<script>
export default {data() {return {moduleLoaded: false,};},methods: {loadModule() {import('./path/to/module.js').then((module) => {// 模块加载成功this.moduleLoaded = true;}).catch((error) => {console.error(error);});},},
};
</script>

结语

建立这个平台的初衷:

  • 打造一个仅包含前端问题的问答平台,让大家高效搜索处理同样问题。

  • 通过不断积累问题,一起练习逻辑思维,并顺便学习相关的知识点。

  • 遇到难题,遇到有共鸣的问题,一起讨论,一起沉淀,一起成长。

感谢关注微信公众号:“程序员大澈”,然后加入问答群,让我们一起解决实现所有BUG!

相关文章:

Vue3问题:如何实现级联菜单的数据懒加载?

前端功能问题系列文章&#xff0c;点击上方合集↑ 序言 大家好&#xff0c;我是大澈&#xff01; 本文约3100字&#xff0c;整篇阅读大约需要5分钟。 本文主要内容分三部分&#xff0c;第一部分是需求分析&#xff0c;第二部分是实现步骤&#xff0c;第三部分是问题详解。 …...

STM32-电源管理(实现低功耗)

电源管理 STM32 HAL库对电源管理提供了完善的函数和命令。 工作模式&#xff08;高功耗->低功耗&#xff09;&#xff1a;运行、睡眠、停止、待机。 若备份域电源正常供电&#xff0c;备份域内的RTC都可以正常运行&#xff0c;备份域内的寄存器的数据会被保存&#xff0c;不…...

vue 自己捣鼓周日程日历组件

需求:想要一个周日程表,记录每天的计划,点击可查看详情。可自定义时间段通过后台获取时间段显示 分析: 通过需求,超级课程表app这款软件其中课表和这个需求很像,只不过这个需求第一列的时间段是自定义的,不是上午下午两个,但是原理都差不多 原本想找一些第三方插件使…...

【力扣】2127. (分类讨论 + 拓扑排序)参加会议的最多员工数

【力扣】2127. &#xff08;分类讨论 拓扑排序&#xff09;参加会议的最多员工数 文章目录 【力扣】2127. &#xff08;分类讨论 拓扑排序&#xff09;参加会议的最多员工数1. 题目介绍2. 思路&#xff08;**分类讨论 拓扑排序**&#xff09;3. 解题代码4. Danger参考 1. 题…...

Flutter——最详细(Map)使用教程

Map简介 键值对的集合&#xff0c;您可以使用其关联的键从中检索值。 普通的 HashMap是无序的&#xff08;不保证顺序&#xff09;&#xff0c;LinkedHashMap 按键插入顺序迭代&#xff0c;而像 SplayTreeMap 这样的排序映射按排序顺序迭代键。 1&#xff0c;添加元素 addEntri…...

vue的入门第一课

Vue.js是一款流行的JavaScript框架&#xff0c;用于构建交互式Web应用程序。本文将详细介绍Vue.js的基础知识&#xff0c;包括Vue.js的历史、设计模式、构造函数参数、el、data、computed、method、watch以及差值的使用。 Vue.js是什么&#xff1f; Vue.js是一款用于构建用户…...

已解决:conda找不到对应版本的cudnn如何解决?

1.解决方法 配置深度学习环境时&#xff0c;打算安装cudatoolkit11.2和cudnn8.1&#xff0c;当使用conda install cudnn8.0时&#xff0c;却搜索不到这个版本的包&#xff0c;解决方法如下&#xff1a; conda search cudnn -c conda-forge然后就可以使用如下命令进行安装对应…...

大语言模型的学习路线和开源模型的学习材料《二》

第三层 LLMs to Artifact 第一重 langchain 【LLMs 入门实战 —— 十二 】基于 本地知识库 的高效 🤖langchain-ChatGLM 介绍:langchain-ChatGLM是一个基于本地知识的问答机器人,使用者可以自由配置本地知识,用户问题的答案也是基于本地知识生成的。【LLMs 入门实战 ——…...

Flask-SQLAlchemy事件钩子介绍

一、前言 前几天在搜资料的时候无意中看到有介绍SQLAlchemy触发器&#xff0c;当时感觉挺奇怪的&#xff0c;触发器不是数据库层面的概念吗&#xff0c;怎么flask-SQLAlchemy这个ORM框架会有这玩意。 二、SQLAlchemy触发器一个简单例子 考虑到效率博客表中有两个字段&#xf…...

C++——list

目录 list介绍 list的函数接口 构造函数 push_front和pop_front push_back和pop_back insert erase 迭代器 front和back size resize empty clear list::sort unique reverse 迭代器的实现 list介绍 list是一种可以在常数范围内在任意位置进行插入和删除的序列…...

【Linux】第九站:make和makefile

文章目录 一、 Linux项目自动化构建工具make/Makefile1.make/makefile工作现象2.依赖关系与依赖方法3.如何清理4.为什么这里我们需要带上clean5.连续的make6.特殊符号 二、Linux下实现一个简单的进度条1.回车换行2.缓冲区3.倒计时的实现 一、 Linux项目自动化构建工具make/Make…...

一文了解什么是WebSocket

WebSocket 允许我们创建“实时”应用程序&#xff0c;与传统 API 协议相比&#xff0c;该应用程序速度更快且开销更少。​ 一、WebSocket 是如何工作的 按照传统的定义&#xff0c;WebSocket是一种双工协议&#xff0c;主要用于客户端-服务器通信通道。它本质上是双向的&…...

redis是什么

redis是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库&#xff0c;并提供多种语言的API。和Memcached类似。redis支持存储的value类型相对更多&#xff0c;包括string(字符串)、list(链表)、set(集合)和zset(有序集合)。 一、 基本…...

基于深度学习的人脸专注度检测计算系统 - opencv python cnn 计算机竞赛

文章目录 1 前言2 相关技术2.1CNN简介2.2 人脸识别算法2.3专注检测原理2.4 OpenCV 3 功能介绍3.1人脸录入功能3.2 人脸识别3.3 人脸专注度检测3.4 识别记录 4 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于深度学习的人脸专注度…...

跨境电商的新引擎:崛起的网红经济

随着全球数字化时代的崛起&#xff0c;跨境电商成为了国际贸易的新引擎&#xff0c;而在这个巨大的变革浪潮中&#xff0c;网红经济正在崭露头角&#xff0c;成为这一引擎的有力推动者。在这篇文章中&#xff0c;我们将深入探讨网红经济如何催生跨境电商的新动力&#xff0c;以…...

P2006 赵神牛的游戏 python解法

赵神牛的游戏 题目描述 在 DNF 中&#xff0c;赵神牛有一个缔造者&#xff0c;他一共有 k k k 点法力值&#xff0c;一共有 m m m 个技能&#xff0c;每个技能耗费的法力值为 a i a_i ai​&#xff0c;可以造成的伤害为 b i b_i bi​&#xff0c;而 boss 的体力值为 n n…...

Unity的碰撞检测(六)

温馨提示&#xff1a;本文基于前一篇“Unity的碰撞检测(五)”继续探讨两个游戏对象具备刚体的BodyType均为Dynamic&#xff0c;但是Collision Detection属性不同的碰撞检测&#xff0c;阅读本文则默认已阅读前文。 &#xff08;一&#xff09;测试说明 在基于两个游戏对象都具…...

从前序与中序遍历序列构造二叉树

代码如下&#xff0c;开袋即食 class Solution {private Map<Integer,Integer> map;public TreeNode buildTree(int[] preorder, int[] inorder) {map new HashMap<>();for(int i 0;i<preorder.length;i){map.put(inorder[i],i);}return build(preorder,inord…...

antd5上传图片显示405解决

antd5上传图片&#xff0c;默认使用上传方式会调用本地的接口。 405 Method Not Allowed 状态码 405 Method Not Allowed 表明服务器禁止了使用当前 HTTP 方法的请求。 Upload {...props}beforeUpload{(file) > {//自定义上传图片的逻辑//最后返回falsereturn false }} &…...

生成瑞利信道(Python and Matlab)

channel h k h_k hk​ is modeled as independent Rayleigh fading with average power loss set as 10^−3 Python import numpy as np# Set the parameters average_power_loss 1e-3 # Average power loss (10^(-3)) num_samples 1000 # Number of fading samples to …...

浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

Python爬虫(一):爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...