快捷導(dǎo)航

vue實現(xiàn)三級聯(lián)動動態(tài)菜單

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

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

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

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

1、代碼

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