vue实现三级联动动态菜单
作者:张小欢ㄦ~
这篇文章主要为大家详细介绍了vue实现三级联动动态菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现三级联动动态菜单的具体代码,供大家参考,具体内容如下
三级联动动态菜单展示:一级菜单选中,生成二级菜单数据,二级菜单选中,生成三级菜单数据(根据上一级菜单的id,作为请求下一级菜单数据接口的参数)
1、代码
<template> <div> <!-- inline:代表的是行内表单,代表一行可以放置多个表单元素 --> <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值,用来获取二级分类的数据 --> <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: [], //一级分类数据 list2: [], //二级分类数据 list3: [], //三级分类数据 cForm: { //收集相应的一级二级分类的id Category1Id: "", Category2Id: "", Category3Id: "", }, }; }, // 组件挂载完毕,向服务器发请求,获取相应的一级分类的数据 mounted() { // 获取一级分类的数据的方法 this.getCategory1List(); }, methods: { // 获取一级分类的数据的方法 async getCategory1List() { let result1List = await this.$API.attr.reqCategory1List(); if (result1List.code == 200) this.list1 = result1List.data; }, async handler1() { // 一级分类的select事件的回调(当一级分类的option发生变化时拿到对应二级分类的数据 //清除数据 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() { // 二级分类的事件回调(当二级分类的option发生变化时拿到对应三级分类的数据 // 清除三级分类的数据 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、效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。