vue-shop主页制作-分类管理|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第7天

0. 页面基本结构搭建

   • 需要将商品分类表格渲染为树状结构 组件库无法实现因此需要依赖第三方的插件
   • npm i vue-table-with-tree-grid -S
   • 需在main.js中导入注册 (参考官方文档)
   • 若想自定义表格列中渲染的内容需要使用模板
   • 若在template中即要使用slot="",v-slot="scope" 应简写为v-slot:default="scope"

1. 添加分类对话框

   • 父级分类表单须在对话框显现时请求数据 因此在点击添加按钮时向后台请求父级数据 并将其转存到自定义的数据中
   • 在添加分类时需通过父级分类确定添加的分类所属的级别 因此在监听到父级分类改变时需要判断selectedKeys数组的长度 若此数组的长度大于0则说明有选中父级分类 若为零则取默认值即添加一级分类同时selectedKeys数组的最后一项即为直接父级 leval的值始终和父级的lenth保持一直(leval从零开始计数 0代表一级)
   • 注：1.当有表单提交数据时首先要确定提交数据的后端接口所需要传递的参数对象 则在自己的数据中提前与表单动态绑定2.每次关闭对话框都需使用表单的resetFiles方法重置表单

   • 分类管理

2. 页面基本结构搭建

   • 需要将商品分类表格渲染为树状结构 组件库无法实现因此需要依赖第三方的插件
   • npm i vue-table-with-tree-grid -S
   • 需在main.js中导入注册 (参考官方文档)
   • 若想自定义表格列中渲染的内容需要使用模板
   • 若在template中即要使用slot="",v-slot="scope" 应简写为v-slot:default="scope"
   • 添加分类对话框

• 补充： 每次制作一个新的页面是需要重新创建一个分支

  • git checkout -b [新分支名字]
  • git branch 检查当前处于哪个分支
  • 开发结束后 git add . git commit -m"记录"
  • 将此分支推送到远程仓库中 git push -u origin [远程仓库的分支名]
  • git checkout master 切换到主分支
  • git merge [新开发的分支] 将新开发的分支合并到主分支
  • git push 将主分支同步推送到远程仓库