三级分类 树形结构

前端环境搭建

然后开始写前端了 前端我使用的是
https://panjiachen.github.io/vue-element-admin-site/zh/guide/
天天开源那个太垃圾了 调了一下午就是run不起来
拉取项目并导入依赖之后 配置环境参数

开发 生产 测试环境
我们使用的是开发环境

创建右侧列表项

根据文档信息

其中path为url路径
component为组建类型
name为组建名称
redirect为无跳转
然后子元素两个
component为组建的路径
然后根据路径创建vue文件

创建树形空间

data为展示的数据 这个数据还得从刚才写的接口查询
node-key为唯一表示 取类别id再好不过了

    <el-tree ref="menuTree" show-checkbox node-key="data.catId"  :data="categoryList" :props="defaultProps" >

    </el-tree>

后天交互展示数据

编写接口 在api中编写后端请求接口

然后导包就可以使用了

我们希望第一次加载页面就进行加载数据

created钩子函数可以解决这个问题 设置将展示的数据 然后刷新路由即可
getMenus实现直接调用后台接口

    getMenus() {
      getCategoryTreeList().then((response) => {
        this.categoryList = response.data
      })
      this.$forceUpdate()
    },