后台管理项目进展（第五、六天）

完成了商品管理项的分类参数模块和商品分类模块

商品分类模块

样式基础搭建，大体样式与其他模块相差不大,其中较为特殊的地方是分类表格的树形结构，由于element-ui没有适合的table-tree组件，这里导入了vue-table-with-tree-grid这个新组件，具体效果和使用方法如下

效果展示：

使用介绍：

导入组件后，data表示需要渲染的数组，columns指定table每一行的名称类型和使用的模板，每个模板需自定义名字，template中的slot属性需与columns中的属性对应。该插件会根据你的数据层次，渲染出层级的table。

更多详细操作：https://www.npmjs.com/package/vue-table-with-tree-grid

商品参数模块

样式搭建如图：

 通过级联选择器存储选择的key值，但只能为第三级分类参数设置，所以这里需用数组操作获取到最后一位参数Array[Array.length-1]。只有当选中第三级的分类时，添加参数按钮才能够启用

渲染表格后，需对tag标签进行处理，后台获取的参数的tag标签属性为字符串类型，如果直接循环渲染会最终渲染为一个表格，所以在这里对得到的tag属性转化为字符串，在循环渲染，当发送请求时在转换回来

 

 当点击添加tag，标签隐藏，输入框显示

 小问题：通过失焦或回车控制输入框显示，输入框的自动聚焦无法实现，这里需要使用到nextTick

 对于tag的删除，就需要利用数组的splice方法，截断删除部分，在转化字符串向后台发送请求