5.1 实现分类管理

5.1.1 实现商品分类

• 分支创建以及上传云端
  git checkout -b goods_cate ---> git branch ---> git push -u origin goods_cate
• 安装树形结构的插件
  npm install vue-table-with-tree-grid
• 实现表格数据的获取与渲染
  用到了一个第三方树形结构插件，设置请求需要的参数，保存相应的数据，渲染到页面，有一些列的渲染用到了作用域插槽模板。
• 实现表格分页
  用了elementUI的分页组件，配置参数，发起请求重新获取数据
• 实现添加分类
  1、先把结构写好，完成对话框和带校验的表单内容，按钮点击显示对话框。
  2、获取父级分类数据列表并保存到data中，供渲染使用
  3、渲染父级分类列表，要用到级联选择器。级联选择器的用法有了有一点点不同，高度布满屏幕太丑了，还影响列表显示，在全局样式gobal.css中修改成想要的高度。太坑了，还以为写错了是数据获取不到。

/* 改变级联选择器高度 */
.el-cascader-menu {
    height: 300px;
}

4、监听级联选择器的改变，重新为添加的商品分类的层级cat_level和分类父cat_pid赋值。在事件处理函数中，通过数组的长度判断是否选中父级分类，添加商品的父级分类以数组的最后一个元素的Id为父级，层级等于数组的长度(0、1、2)

parentCateChanged() {
        console.log(this.selectedKeys);
        //判断是否选中
        //如果seslectedKeys数组中的length大于0，说明父级分类被选中
        //否则，说明没有选中任何父级分类
        //有选中父级分类，就要重置当前商品分类的ID和level
        //没有选中父级分类，当前商品分类的Id和level都是=0
        if(this.selectedKeys.length > 0) {
            //父级分类id,是selectedKeys数组的最后一项
            this.addCateForm.cat_pid = this.selectedKeys[
                this.selectedKeys.length-1
            ]
            //当前分类的等级,数组长度
            this.addCateForm.cat_level = this.selectedKeys.length
            return
        }else
        {
            //父级分类id,为0
            this.addCateForm.cat_pid = 0
            //当前分类的等级,为0
            this.addCateForm.cat_level = 0
            return
        }
    },

5、确认添加，发起请求，刷新，隐藏对话框

• 实现修改商品分类