Vue3問題：如何實現級聯菜單的數據懶加載？

作者：程序員大澈 2024-01-08 08:50:19

開發前端

實現級聯菜單效果，點擊一級菜單某一項，就會加載出對應的二級菜單內容，點擊二級菜單某一項，就會加載出對應的三級菜單內容，以此類推，最后一級為五級菜單。

序言

大家好，我是大澈！

本文約3100+字，整篇閱讀大約需要5分鐘。

本文主要內容分三部分，第一部分是需求分析，第二部分是實現步驟，第三部分是問題詳解。

如果您只需要解決問題，請閱讀第一、二部分即可。

如果您有更多時間，進一步學習問題相關知識點，請閱讀至第三部分。

一、需求分析

對于加載而言，必須是懶加載效果，即點擊菜單某一項時，才會真正去請求加載對應的下一級菜單內容。

對于菜單最后一級內容，要插入一個輸入框，在輸入框內，用戶可以任意輸入版本號，并且要求輸入框不可被選中。

當然，我們的正題是數據的懶加載，級聯菜單中插入不可被選中的輸入框實現算是附加內容了。

二、實現步驟

1、為什么要使用數據懶加載

在項目中，我們使用數據的懶加載，會有如下好處：

提升用戶體驗
減少初始加載時間
減輕網絡資源的消耗

了解了這些好處之后，再就是要了解數據懶加載的應用場景。

這部分比較有用，所以多敘述一些。

數據懶加載在以下場景中特別有用：

長列表或分頁數據：當你有一個包含大量數據的列表或分頁功能時，可以使用數據懶加載來延遲加載列表項或分頁數據。只有當用戶滾動到可見范圍時才加載新的數據，從而提高初始加載速度和響應性能。
圖片或媒體資源：對于包含大量圖片或媒體資源的頁面，可以使用數據懶加載來延遲加載這些資源。只有當圖片或媒體元素進入視口時才進行加載，從而減少初始加載時間和網絡資源的消耗。
條件性加載：當一些數據或組件只在特定條件下才需要顯示或使用時，可以使用數據懶加載。根據條件動態加載數據或組件，避免不必要的加載和資源占用。
路由級別的懶加載：在Vue的路由中，可以使用懶加載來按需加載路由組件。只有當用戶訪問某個路由時才進行組件的加載，提高初始加載速度和路由切換的性能。
異步加載模塊：對于大型的Vue項目，可以使用數據懶加載來異步加載模塊，減少初始加載時間。將模塊分割成小塊，并在需要時按需加載，提高應用的性能和可維護性。

上述場景在此部分只做簡單描述，如果你有空余時間，各個場景具體代碼實例請見第三部分總結。

我們這次的需求實現，就是符合第1條場景。

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>

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>

三、問題詳解

1、關于CascaderProps配置項的參數一覽

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>

責任編輯：姜華來源：今日頭條

Vue3 級聯菜單數據懶加載