vue电商后台管理系统保姆级教程——商品分类

Posted 2021-05-17 十九万里

总文章地址：

vue.js基础还不会？——看这篇文章就够了

14万字手把手教你做vue电商后台管理（全）——技术栈（vue全家桶 Webpack Git axios Element-ui）

10.1 介绍商品分类功能的作用

效果图：

三级子分类：可以添加和删除分类：

10.2 创建goods-cate子分支并push到码云

Git branch 查看当前分支
Git checkout -b doods_cate穿创建新分支
Git branch 查看当前分支
Git push -u orgin goods_cate 在云端中新建goods_date分支

10.3 通过路由加载商品分类组件

创建cate.vue，创建结构，行为，样式

在路由中加载，注册称为children子路由：

10.4 调用API获取商品分类列表数据

面包屑导航：
添加分类按钮：

效果：

通过api调用数据：
定义数组catslist数组 写函数，定义函数，created生命周期函数

queryInfo（）：查询条件
查询请求：

返回函数，判断请求：

total需要定义数组：

10.5 初步使用vue-table-with-tree-grid

利用第三方插件：

在main.js中导入第三方模块
全局注册：
columns：标题
prpo:具体的值

隐藏前面的复选框：

使用属性修改：

10.6 使用自定义模板列渲染表格数据

使用作用域插槽

10.7 渲染排序和操作对饮的ui结构

首先先定义数据：
在表格区域中定义模板：
然后渲染数据：

修改样式：
使用type属性
在vue中按需渲染使用v-if

美化图标：

10.8 实现分页功能

绑定事件处理函数：

在methods中绑定处理函数：
在date中赋值：
发起数据请求：

第二个函数：

第三个：当前页面的展示：
current-change：

10.9 渲染添加分类添加分类的对话框和表单

点击添加按钮弹出添加对话框：
在卡片视图区域：添加分类的对话框
ui结构：

优化之后：

添加date：

绑定点击事件：

新增事件处理函数：

描写弹出框的内容：

定义数据：

优化：

双向绑定数据：

定义验证对象规则：

10.10 获取父级分类数据列表

效果图：

API：
添加函数：

发起get请求：

在点击展开对话框的时候调用此函数：

简化异步操作：解构promise，判断验证。

成功之后就保存在date中

赋值到date中：

10.11 渲染级联选择器

使用组件：

按需导入，全局注册
先写入结构

使用其中属性：
props配置


在date中定义propes：
定义双向绑定函数：

改变之后需要在选择框中打印出来：

选中一级分类使用

10.12 根据父分类的变化，处理表单中的数据

输入数据的时候要监听下面是一级分类还是默认的，如果是一级分类添加的数据会是此一级分类下面的二级分类
判断：


点击确定按钮拿到数据

10.13 在对话框的close事件中重置表单数

对话框关闭，数据清空
绑定关闭函数：

定义函数：
重置表单：
清空数组：

10.14 完成添加分类的操作

api：

添加按钮的事件处理函数：
预验证：回调函数拿到数据
判断优化：

10.15 将goods-cate分支提交代码

10.16 创建goods-params分支