电商后台管理系统——商品管理

电商后台管理系统——商品管理

商品管理模块分为商品分类，分类参数，商品列表三个小模块，商品分类模块实现展示商品分类数据，添加分类功能，编辑删除分类功能；分类参数模块实现根据商品分类展示该分类的静态属性和动态参数，添加动态参数和静态属性功能，并实现删除修改每项属性以及每项属性下的tag内容功能；商品列表模块实现展示商品列表信息以及修改删除商品信息，搜索商品，添加商品功能。

一、商品分类

商品分类实现图


商品分类流程图

创建cate商品组件并设置路由规则——添加cate组件基本布局——请求商品分类数据保存到data中——使用第三方插件vue-table-with-tree-grid展示分类数据以及自定义列的数据——完成分页功能pagination组件——实现添加分类按钮功能
其中每部分详解：
基本布局
面包屑导航 卡片视图区域，卡片视图区域包括添加分类按钮，以及一个表单，这块通过el-row,el-col布局，表单数据分为五列，索引列，分类，名称列，是否有效列，排序列，操作列；

请求商品分类数据
定义方法发送get请求获取商品分类数据保存到data中，并保存总数据条数；

展示分类数据以及自定义列的数据
tree-table组件绑定:data=“catelist” ，show-index index-text="#" 设置索引列，其他三列通过作用域与插槽实现，具体实现类似之前实现方式；

 <tree-table :data="catelist" :columns="columns" :selection-type="false" :expand-type="false"
         show-index index-text="#" border :show-row-hover="false">

分页功能
与之前页面的分页功能实现代码类似；

添加分类按钮功能

布局添加分类按钮对话框——添加分类按钮绑定事件实现打开对话框且获取数据渲染到页面——选项选择触发事件——对话框确定按钮

添加分类对话框为一个分类名称输入框以及一个下拉选择框选择父级分类，分类名称输入框双向绑定数据存入data并且设计验证规则即该框必须有输入。

获取数据渲染步骤
发送get请求获取父级分类数据列表存储到data ，利用cascader组件显示父级分类，options绑定父级类列表的数据即指定数据源，props是用来指定配置对象，如显示的值，真实值，父子嵌套使用的属性，v-model双向绑定选中的父级分类的id数组到data中

 <el-cascader expand-trigger="hover" :options="parentCateList" :props="cascaderProps" v-model="selectedKeys" @change="parentCateChanged" clearable change-on-select>

选择触发事件
即上面的parentCateChanged方法，在里面判断数组长度是否大于0&