黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理（商品分类）

目录

商品分类

一.创建一个子分支

二.创建组件

 三.绘制商品分类的页面基本结构

 四.功能

五.提交代码

---

 

商品分类

一.创建一个子分支

git branch——查看当前所在分支

git checkout -b goods_cate——创建新的子分支goods_cate

git branch——查看当前所在分支

git push -u origin goods_cate——将子分支goods_cate推送到云端仓库中

二.创建组件

通过路由的形式加载到页面中来进行显示

 效果：

 三.绘制商品分类的页面基本结构

1.面包屑导航栏

 2.卡片视图区域

（1）获取分类数据

在data中定义一个查询条件的对象，作为发送数据请求时的参数

在data中定义一个空数组，用来保存商品分类的数据列表

在methods中定义一个函数，用来获取数据列表

 在生命周期函数中调用getCateList()函数

 

 向服务器发送请求，失败则弹框提示用户，成功则将获取到的数据赋值给catelist数组

在data中定义一个total，用来存放数据总条数

 

 为total赋值

（2）渲染数据

安装依赖vue-table-with-tree-grid

导入插件

在main.js中导入并注册为全局可用的组件

 在卡片视图区域中使用tree-table插件

tree-table插件的官方api

 

label指的是列的标题，prop指定的是这一列绑定的属性

 

 效果：