1、Vue_day10,Contents,目,录,商品分类 参数管理,Contents,目,录,商品分类 参数管理,了解商品分类功能是做什么的,要点提示,商品分类-介绍商品分类功能的作用,掌握程度:了解,1.1 介绍商品分类功能的作用,了解如何创建子分支并上传到码云,要点提示,创建goods_cate子分支并push到码云中,掌握程度:了解,1.2 创建goods_cate子分支并push到码云中,了解如何添加商品分类子组件以及规则,要点提示,商品分类-通过路由加载商品分类组件,掌握程度:了解,1.3 通过路由加载商品分类组件,了解商品分类组件的基本布局结构,要点提示,商品分类-绘制商品分类组件的
2、基本页面布局,掌握程度:了解,1.4 绘制商品分类组件的基本页面布局,了解如何发送请求获取商品分类数据,要点提示,商品分类-调用API获取商品分类列表数据,掌握程度:了解,1.5 调用API获取商品分类列表数据,了解vue-table-with-tree-grid树形表格组件该如何进行使用,要点提示,商品分类-初步使用vue-table-with-tree-grid树形表格组件,掌握程度:了解,1.6 学会使用第三方插件,练习,完成商品分类页面基本布局请求商品分类数据并使用vue-table-with-tree-grid插件展示,提示,按照步骤完成商品分类页面A.新建goods_cate分支并
3、推送到码云B.创建categories子级路由并设置规则C.修改Cate.vue组件完成基本布局D.参考接口文档发送请求获取商品分类数据E.安装第三方插件vue-table-with-tree-gridF.注册第三方插件vue-table-with-tree-gridG.使用vue-table-with-tree-grid展示数据,10分钟,1.6 学会使用第三方插件,案例:完成商品分类页面基本布局,了解如何使用columns数组设置自定义列,要点提示,商品分类-使用自定义模板列渲染表格数据,掌握程度:了解,1.7 使用自定义模板列渲染表格数据,了解使用v-if判断并渲染对应的结构,要点提示,
4、商品分类-渲染排序和操作对应的UI结构,掌握程度:了解,1.8 渲染排序和操作对应的UI结构,了解如何实现分页功能,要点提示,商品分类-实现分页功能,掌握程度:了解,1.9 实现分页功能,了解添加分类对话框的结构,要点提示,商品分类-渲染添加分类的对话框和表单,掌握程度:了解,1.10 渲染添加分类的对话框和表单,练习,完成使用vue-table-with-tree-grid展示分类数据表格实现分页功能完成添加分类对话框的基本结构,提示,按照步骤完善商品分类页面A.使用columns定义表格中的自定义列B.使用slot属性将插件和columns中的template绑定C.使用el-pagina
5、tion完成分页功能D.完成添加分类对话框。,8分钟,1.10 渲染添加分类的对话框和表单,案例:完善商品分类页面功能,了解如何获取父级分类数据,要点提示,商品分类-获取父级分类数据列表,掌握程度:了解,1.11 获取父级分类数据列表,了解如何将数据绑定到级联选择器中展示,要点提示,商品分类-渲染级联选择器,掌握程度:了解,1.12 渲染级联选择器,了解如何获取父级分类数据,要点提示,商品分类-根据父分类的变化处理表单中的数据,掌握程度:了解,1.13 根据父分类的变化处理表单中的数据,练习,完成使用vue-table-with-tree-grid展示分类数据表格实现分页功能完成添加分类对话框
6、的基本结构,提示,按照步骤完成级联选择器A.使用columns定义表格中的自定义列B.使用slot属性将插件和columns中的template绑定C.使用el-pagination完成分页功能D.完成添加分类对话框。,8分钟,1.13 根据父分类的变化处理表单中的数据,案例:完善级联选择器,了解重置表单数据,要点提示,商品分类-在对话框的close事件中重置表单数据,掌握程度:了解,1.14 在对话框的close事件中重置表单数据,了解如何发送请求添加分类,要点提示,商品分类-完成添加分类的操作,掌握程度:了解,1.15 完成添加分类的操作,掌握git提交代码的操作,要点提示,分支操作-将g
7、oods_cate分支上的代码提交到Git仓库中,掌握程度:了解,1.16 将goods_cate分支上的代码提交到Git仓库中,掌握创建分支的方式,要点提示,分支操作-创建goods_params分支,掌握程度:了解,1.17 创建goods_params分支,练习,完成添加分类的功能将代码上传到码云,提示,按照步骤完成商品分类A.在关闭对话框时重置表单B.在点击对话框中的确定时发送请求完成添加分类的操作C.上传代码到码云,8分钟,1.17 创建goods_params分支,案例:完成商品分类,上午复习,Vue第十天-上午复习,在安装完了vue-table-with-tree-grid之后,
8、我们可以在main.js中使用import导入该组件并使用Vue.硬compent(tree-table,TreeTable)注册该组件在vue-table-with-tree-grid组件中,我们必须使用 硬columns属性添加绑定自定义列,并在插槽中使用硬slot绑定columns中设置的template在级联选择框组件中,我们必须使用 硬expandTrigger=hover设置鼠标悬停触发选择,使用change-on-select设置用户可以选择任一级别的级联菜单,上午复习,Vue第十天-上午复习,在安装完了vue-table-with-tree-grid之后,我们可以在main.js中使用import导入该组件并使用Vpent(tree-table,TreeTable)注册该组件在vue-table-with-tree-grid组件中,我们必须使用 columns属性添加绑定自定义列,并在插槽中使用slot绑定columns中设置的template在级联选择框组件中,我们必须使用 expandTrigger=hover设置鼠标悬停触发选择,使用change-on-select设置用户可以选择任一级别的级联菜单,Contents,目,录,商品分类 参数管理,掌握创建分支的方式,要点提示,分类参数-介绍分类参数功能的作用,掌握程度:了解,2.1 介绍分类参数功能的作用,