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)
选中项ID数组
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、确认添加，发起请求，刷新，隐藏对话框
- 实现修改商品分类
