电商管理系统的商品分类

1. 先是创建分支goods_cate

git branch//查看分支
git checkout -b goods_cate//创建商品分类分支并切换到此分支
git push -u origin goods_cate//将分支推送到远程仓库

2.创建组件Cate.vue导入组件

根据接口文件知道路由规则如下：

            { path: '/categories', component: Cate }

3. 绘制商品分类页面的视图

1. 导入面包屑导航模板
2. 导入卡片视图模板
3. 获取接口数据，根据接口API文档我们需要请求参数
4. element ui没有树形的table表格组件，所以安装第三方依赖

然后参照它的官方文档，如何使用，在main.js入口文件中导入

import ZkTable from 'vue-table-with-tree-grid'
Vue.component('自定义的插件名字', ZkTable)

查看官方example.vue结合API 的说明去使用,对于把布尔值专为图标什么的我们用自定义的作用域插槽,注意新旧插槽语法不能混合使用否则会报错，所以需要如下使用：而不是slot="isok"，其他的使用都和之前一样

<template v-slot:isok="slotProps">
    <i class="el-icon-success"
    v-if="slotProps.row.cat_deleted===false"
    >
    </i>
    <i class="el-icon-errors"></i>
    </template>

4. 添加分类

添加分类的弹出框和之前的类似，这里的父级分类是新的，首先需要获取父级分类数据列表，参考商品分类数据列表可以：

async  getParentCateList () {
      const { data: res } = await this.$http.get('categories', { params: { type: 2 } })
      if (res.meta.status !== 200) {
        return this.$message.error('获取父级分类失败')
      }
      console.log(res.data)
    }

然后在data中定义parentCateList，然后使用element ui提供的Cascader级联框 在使用Cascader的时候一定要注意一定要注意一定要注意在globa.css文件中写入

.el-cascader-menu {
    height: 300px;
}

如果不对级联框设置高度会显示有问题，