电子商务管理系统——商品管理商品管理模块分为商品分类、分类参数、商品列表三个小模块，商品分类模块实现商品分类数据展示、添加分类功能、编辑删除分类功能； 分类参数模块基于商品分类展示该分类的静态属性和动态参数，增加动态参数和静态属性功能，实现删除修改各属性和各属性下的tag内容的功能； 商品清单模块实现商品清单信息的展示和删除、商品的检索、商品的追加功能。
一、商品分类http://www.Sina.com/http://www.Sina.com /
使用——第三方插件vue-table-with-tree-grid创建cate商品组件并配置路由规则——以添加cate组件的基本布局——请求将商品分类数据存储在data中
其中各部分详情：商品分类实现图
面包屑导航卡视图区域、卡视图区域包括添加分类按钮和用el-row、el-col布局的表单。 表单数据分为5列、索引列、分类、名称列、是否为有效列、排序列和操作列。
商品分类流程图
定义方法发送get请求，将商品分类数据保存在data中，保存总数据数量；
基本布局
tree-table组件绑定：data=“catelist”，show-index-text=' # '设置索引列，其他三列通过范围和插槽实现
tree-table : data=' cate list ' : columns=' columns ' : selection-type=' false ' 3360扩展类型=' false
与上一页分页功能的实现代码类似；
请求商品分类数据
打开“布局分类按钮添加”对话框3354“添加分类按钮合并事件”对话框，并实现用于在页面3354上呈现数据的选项选择触发事件——对话框确定按钮
在“添加分类”对话框中，为分类名称输入框和下拉复选框选择父分类。 必须在分类输入框中双向绑定数据并将其存储在data中，才能设计验证规则。
展示分类数据以及自定义列的数据
发送get请求以获取父类的数据列表，将其存储在data中，然后使用cascader组件查看父类。 options通过绑定父类列表中的数据来指定数据源。 props为data指定配置对象，例如显示的值、真值、嵌套在父子之间使用的属性以及v-model双向绑定中选定父类的id数组
El-cascaderexpand-trigger=' hover ' : options=' parentcatelist ' : props=' cascaderprops ' v-model=' selece
也就是说，在上面的parentCateChanged方法中，wndmht判断数组的长度是否大于0，如果大于0，则进行选中，从selectedKeys中取出父类id并分割为data的数据cat_id
分页功能
首先预验证输入框，在开机自检请求中添加分类，成功后重新获取商品分类数据，关闭对话框
要接收添加分类对话框的关闭事件，wndmht必须重置对话框中的表单数据，并将selectedKeys数组、数据的cat_id和cat-level重新赋值为0。
二、分类参数添加分类按钮功能
http://www.Sina.com/http://www.Sina.com /
创建Param分类参数组件，设置路由规则——完成Params.vue组件基本布局——完成商品分类级联选择框功能——，显示动态参数的功能和静态属性参数数据功能——
获取数据渲染步骤
面包屑导航卡视图，el-row.el-col布局
选择触发事件
像以前那样获取商品分类数据，然后在el-cascader中进行渲染，并通过链接级联选择框中的复选框来触发事件。 此处的触发事件调用用于检索和呈现动态和静态参数页面数据的函数。
对话框确定按钮
ng>需要额外的在tab页签el-tabs上绑定tab页签的点击事件，即一旦点击立马调用获取参数列表数据的函数重新渲染（针对于点击的是动态参数还是静态属性页签）
获取上述参数的函数
判断是否选中三级分类——选中三级分类后通过发送get请求（带cateid当前选项id）获取对应的参数）——循环遍历数据res.data存入数组attr_vals——通过参数判断点击的是动态参数页面还是静态参数页面——赋值res.data给对应的页面数据数组
注意项：通过在el-tabs最外层上v-model绑定选定选项卡的name可以明确当前点的是only还是many，再通过computed定义动态计算标题文本，即将两者判断返回值是动态参数还是静态属性
在展开列通过作用域插槽实现自定义格式，在el-tag循环遍历数组attr_vars实现循环渲染tag标签，并且还添加输入文本框实现可以自己在此添加标签以及删除标签的功能
添加标签功能：
输入文本框通过按钮点击事件将文本框的visbile设为true显示，而按钮事件的数据通过文本框双向绑定传递
用到了**$nextTick** 方法
作用是当页面上元素被重新渲染之后，才会指定回调函数中的代码（如果不这样，元素没渲染就获取会报错）
this.$nextTick(_ => {
this. r e f s . s a v e T a g I n p u t . refs.saveTagInput. refs.saveTagInput.refs.input.focus()
})
回调函数代码则通过先判断是否有输入，有输入内容则需要发起请求put保存此此数据到数据库。
添加参数或属性功能
实现步骤：添加el-dialog布局——添加表单验证规则——确定按钮绑定添加事件——关闭事件重置对话框
添加事件：验证输入是否有效，再将该分类id以及添加的参数名字和属于哪个页面（静态页面还是动态参数页面）的数据通过post请求实现添加参数功能，添加成功则关闭对话框，重新调用获取参数数据函数。
编辑和删除参数功能
编辑功能
编辑el-dialog布局——对话框里绑定相关数据——校验规则——确定按钮绑定编辑参数事件（判断是否符合校验规则，符合再put数据，再 重新获取参数再关闭对话框）
删除功能
按钮绑定事件，通过splice函数传入选中的attr_id删除attr_vals数组中的数据，再调用发起请求保存到数据库的函数。
三、商品列表商品列表实现图
商品列表流程图
商品列表实现过程
1.新建List组件，添加子级路由组件以及对应的规则，设置组件的基本结构——2.实现表单数据渲染以及分页功能，搜索功能，编辑删除商品功能（day11讲解删除更清楚）的实现（类似于用户列表页面）——3.添加按钮绑定点击事件通过编程式导航跳转到添加商品页面并添加路由规则——4.布局Add添加商品组件——5.基本信息页面实现（之前都做过类似功能）——5.添加tab栏切换验证——6.展示商品参数和商品属性页面的信息——7.商品图片上传——8.完成添加商品操作
2实现开始页面
表单中中需要添加过滤器，将秒数过滤为年月日，时分秒
4布局Add添加商品组件
使用了步骤条组件el-steps，在form表单中使用了tabs标签页，大致使用方法如下图
<el-form> <el-tabs> <el-tab-pane> <el-form-item> </el-form-item> <el-form-item> </el-form-item> </el-tab-pane> <el-tab-pane> </el-tab-pane> </el-tabs></el-form>5.添加tab栏切换验证
先给el-tabs绑定选中选项卡的name并添加绑定事件函数，事件函数通过传入选中选项卡的name和即将离开的选项卡的name，再判断是否满足各个页面的校验条件（这里是判断各个页面存储数据的数组情况）
6.展示商品参数和商品属性页面的信息
这两者的数据通过判断用户点击的tab栏的切换选择传入get请求各自的参数获取各自的数据
商品参数使用数组渲染复选框组 el-checkbox-group，商品属性通过循环生成静态属性渲染到el-form-item，这里的输入框依旧通过 v-model="item.attr_vals双向绑定
<el-tab-pane label="商品参数" name="1"> <!-- 渲染表单的Item项 --> <el-form-item :label="item.attr_name" v-for="item in manyTableData" :key="item.attr_id"> <!-- 复选框组 --> <el-checkbox-group v-model="item.attr_vals"> <el-checkbox :label="cb" v-for="(cb, i) in item.attr_vals" :key="i" border></el-checkbox> </el-checkbox-group> </el-form-item> </el-tab-pane> <el-tab-pane label="商品属性" name="2"> <el-form-item :label="item.attr_name" v-for="item in onlyTableData" :key="item.attr_id"> <el-input v-model="item.attr_vals"></el-input> </el-form-item> </el-tab-pane>7.商品图片上传
使用upload组件完成图片上传，upload组件进行图片上传的时候并不是使用axios发送请求，所以，我们需要手动为上传图片的请求添加token，即为upload组件添加headers属性。
<el-upload :action="uploadURL" :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSuccess" list-type="picture" :headers="headerObj"><el-button size="small" type="primary">点击上传</el-button> </el-upload>action:指定图片上传api接口
:on-preview ： 当点击图片时会触发该事件进行预览操作,处理图片预览
:on-remove : 当用户点击图片右上角的X号时触发执行
:on-success：当用户点击上传图片并成功上传时触发
list-type ：设置预览图片的方式
:headers ：设置上传图片的请求头
设置预览图片对话框
<el-dialog title="图片预览" :visible.sync="previewVisible" width="50%"> <img :src="previewPath" class="previewImg" /></el-dialog>handlePreview预览事件：通过 this.previewPath = file.response.data.url设置预览图片的地址，通过 this.previewVisible = true显示预览图片对话框
handleRemove删除事件： 先获取将要删除的图片的临时路径，从data中的addform对象的 pics 数组中找到这个图片对应的索引值，调用数组的 splice 方法把图片信息对象，从 pics 数组中移除
handleSuccess上传成功事件：将图片信息对象push到pics数组中
8.完成商品添加操作
在添加商品之前，为了避免goods_cat数组转换字符串之后导致级联选择器（级联选择器只能绑定到数组）报错，我们需要打开vue控制条，点击依赖，安装lodash，把addForm（添加商品的对象信息）进行深拷贝存到新的数组。这里还有对其中动态参数的处理和静态属性的处理。即通过循环遍历各自存储的数组中 的数据item.attr_id,item.attr_vals再push保存到data中的添加商品的表单数据对象里。
添加事件通过发送post请求实现成功添加商品，再通过编程式导航跳转回商品分类最初的界面。