快捷導(dǎo)航

vue實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)動(dòng)態(tài)菜單

更新時(shí)間：2022年04月13日 16:22:19 作者：張小歡ㄦ~

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)動(dòng)態(tài)菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)動(dòng)態(tài)菜單的具體代碼，供大家參考，具體內(nèi)容如下

三級(jí)聯(lián)動(dòng)動(dòng)態(tài)菜單展示：一級(jí)菜單選中，生成二級(jí)菜單數(shù)據(jù)，二級(jí)菜單選中，生成三級(jí)菜單數(shù)據(jù)（根據(jù)上一級(jí)菜單的id，作為請(qǐng)求下一級(jí)菜單數(shù)據(jù)接口的參數(shù)）

1、代碼

<template>
? <div>
? ? <!-- inline:代表的是行內(nèi)表單，代表一行可以放置多個(gè)表單元素 -->
? ? <el-form :inline="true" class="demo-form-inline" :model="cForm">
? ? ? <el-form-item label="一級(jí)分類(lèi)">
? ? ? ? <el-select placeholder="請(qǐng)選擇" v-model="cForm.Category1Id" @change="handler1">
? ? ? ? ? <!-- select框v-model收集的是value值，不是label，拿到一級(jí)分類(lèi)的value值，用來(lái)獲取二級(jí)分類(lèi)的數(shù)據(jù) -->
? ? ? ? ? <el-option :label="c1.name" :value="c1.id" v-for="c1 in list1" :key="c1.id"></el-option>
? ? ? ? </el-select>
? ? ? </el-form-item>
? ? ? <el-form-item label="二級(jí)分類(lèi)">
? ? ? ? <el-select placeholder="請(qǐng)選擇" v-model="cForm.Category2Id" @change="handler2">
? ? ? ? ? <el-option :label="c2.name" :value="c2.id" v-for="c2 in list2" :key="c2.id"></el-option>
? ? ? ? </el-select>
? ? ? </el-form-item>
? ? ? <el-form-item label="三級(jí)分類(lèi)">
? ? ? ? <el-select placeholder="請(qǐng)選擇" v-model="cForm.Category3Id">
? ? ? ? ? <el-option :label="c3.name" :value="c3.id" v-for="c3 in list3" :key="c3.id"></el-option>
? ? ? ? </el-select>
? ? ? </el-form-item>
? ? </el-form>
? </div>
</template>
?
<script>
export default {
? name: "CategorySelect",
? data() {
? ? return {
? ? ? list1: [], //一級(jí)分類(lèi)數(shù)據(jù)
? ? ? list2: [], //二級(jí)分類(lèi)數(shù)據(jù)
? ? ? list3: [], //三級(jí)分類(lèi)數(shù)據(jù)
? ? ? cForm: {
? ? ? ? //收集相應(yīng)的一級(jí)二級(jí)分類(lèi)的id
? ? ? ? Category1Id: "",
? ? ? ? Category2Id: "",
? ? ? ? Category3Id: "",
? ? ? },
? ? };
? },
?
? // 組件掛載完畢，向服務(wù)器發(fā)請(qǐng)求，獲取相應(yīng)的一級(jí)分類(lèi)的數(shù)據(jù)
? mounted() {
? ? // 獲取一級(jí)分類(lèi)的數(shù)據(jù)的方法
? ? this.getCategory1List();
? },
? methods: {
? ? // 獲取一級(jí)分類(lèi)的數(shù)據(jù)的方法
? ? async getCategory1List() {
? ? ? let result1List = await this.$API.attr.reqCategory1List();
? ? ? if (result1List.code == 200) this.list1 = result1List.data;
? ? },
? ? async handler1() {
? ? ? // 一級(jí)分類(lèi)的select事件的回調(diào)（當(dāng)一級(jí)分類(lèi)的option發(fā)生變化時(shí)拿到對(duì)應(yīng)二級(jí)分類(lèi)的數(shù)據(jù)
? ? ? //清除數(shù)據(jù)
? ? ? this.list2 = [];
? ? ? this.list3 = [];
? ? ? this.cForm.Category2Id = "";
? ? ? this.cForm.Category3Id = "";
? ? ? let result2List = await this.$API.attr.reqCategory2List(
? ? ? ? this.cForm.Category1Id
? ? ? );
? ? ? if (result2List.code == 200) {
? ? ? ? this.list2 = result2List.data;
? ? ? }
? ? },
? ? async handler2() {
? ? ? // 二級(jí)分類(lèi)的事件回調(diào)（當(dāng)二級(jí)分類(lèi)的option發(fā)生變化時(shí)拿到對(duì)應(yīng)三級(jí)分類(lèi)的數(shù)據(jù)
? ? ? // ? 清除三級(jí)分類(lèi)的數(shù)據(jù)
? ? ? this.list3 = [];
? ? ? this.cForm.Category3Id = "";
? ? ? let result3List = await this.$API.attr.reqCategory3List(
? ? ? ? this.cForm.Category2Id
? ? ? );
? ? ? if (result3List.code == 200) {
? ? ? ? this.list3 = result3List.data;
? ? ? }
? ? },
? },
};
</script>
?
<style>
</style>

2、效果