中興AX5400Pro+上手體驗：再升級 雙2.5G網口+USB 3.0這次全都有
2021年11月的時候，中興先后發布了兩款路由器產品，中興AX5400和中興AX5400 Pro，從產品命名上就不難看出這是隸屬于同一系列的，但在外觀設計上這兩款產品可以說是完全沒一點關系
大家好，我是大澈！
本文約3100+字，整篇閱讀大約需要5分鐘。
本文主要內容分三部分，第一部分是需求分析，第二部分是實現步驟，第三部分是問題詳解。
如果您只需要解決問題，請閱讀第一、二部分即可。
如果您有更多時間，進一步學習問題相關知識點，請閱讀至第三部分。
實現級聯菜單效果，點擊一級菜單某一項，就會加載出對應的二級菜單內容，點擊二級菜單某一項，就會加載出對應的三級菜單內容，以此類推，最后一級為五級菜單。
對于加載而言，必須是懶加載效果，即點擊菜單某一項時，才會真正去請求加載對應的下一級菜單內容。
對于菜單最后一級內容，要插入一個輸入框，在輸入框內，用戶可以任意輸入版本號，并且要求輸入框不可被選中。
當然，我們的正題是數據的懶加載，級聯菜單中插入不可被選中的輸入框實現算是附加內容了。
在項目中，我們使用數據的懶加載，會有如下好處：
了解了這些好處之后，再就是要了解數據懶加載的應用場景。
這部分比較有用，所以多敘述一些。
數據懶加載在以下場景中特別有用：
上述場景在此部分只做簡單描述，如果你有空余時間，各個場景具體代碼實例請見第三部分總結。
我們這次的需求實現，就是符合第1條場景。
當選中某一級時，動態加載該級下的選項。
通過lazy開啟動態加載，并通過lazyload方法來設置加載數據源。
模板代碼：
<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>通過插槽和條件判斷，在級聯面板中插入輸入框，其中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>
長列表或分頁數據懶加載：
<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>本文鏈接：http://www.www897cc.com/showinfo-26-57846-0.htmlVue3問題：如何實現級聯菜單的數據懶加載？
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號