三级菜单（前端）

huxingwangu

于 2023-03-21 09:39:06 发布

阅读量103

点赞数

文章标签：前端 java vue.js

本文链接：https://blog.csdn.net/huxingwangu/article/details/129681385

版权

本文详细介绍了如何使用Vue.js框架来创建和管理三级导航菜单。通过组件化的方式，阐述了菜单项的递归渲染，以及如何响应式地展示不同级别的菜单内容。内容包括数据结构设计、模板语法的应用和事件监听等关键步骤。

摘要由CSDN通过智能技术生成

页面部分：

 <div class="block">
       <el-cascader
         v-model="form.region"
         :options="reclassifyList"
         :props="{ value: 'id',label: 'name',children: 'children'}"//根据得到的数组结构自定义变更
         @change="handleChange"></el-cascader>
</div>

// 引入API中js的方法
// 获得商品分类列表
export function getProductCategoryList(query) {
  return request({
    url: '/cems/category/list',
    method: 'get',
    params: query
  })
}

//三级列表
// 执行查询
//methods:部分：
//查看更改值 
handleChange(value) {
        console.log(value);
      },
//请求数据方法
 getProductCategoryList(this.queryParams).then(response => {
        this.reclassifyList = this.handleTree(response.data, "id", "parentId");
        this