0
点赞
收藏
分享

微信扫一扫

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品分类)

米小格儿 2022-04-17 阅读 94

目录

商品分类

一.创建一个子分支

二.创建组件

 三.绘制商品分类的页面基本结构

 四.功能

五.提交代码


 

商品分类

一.创建一个子分支

git branch——查看当前所在分支

git checkout -b goods_cate——创建新的子分支goods_cate

git branch——查看当前所在分支

git push -u origin goods_cate——将子分支goods_cate推送到云端仓库中

二.创建组件

通过路由的形式加载到页面中来进行显示

 效果:

 三.绘制商品分类的页面基本结构

1.面包屑导航栏

 2.卡片视图区域

(1)获取分类数据

在data中定义一个查询条件的对象,作为发送数据请求时的参数

在data中定义一个空数组,用来保存商品分类的数据列表

在methods中定义一个函数,用来获取数据列表

 在生命周期函数中调用getCateList()函数

 

 向服务器发送请求,失败则弹框提示用户,成功则将获取到的数据赋值给catelist数组

在data中定义一个total,用来存放数据总条数

 

 为total赋值

(2)渲染数据

安装依赖vue-table-with-tree-grid

导入插件

在main.js中导入并注册为全局可用的组件

 在卡片视图区域中使用tree-table插件

tree-table插件的官方api

 

label指的是列的标题,prop指定的是这一列绑定的属性

 

 效果:

 

 隐藏前面的勾选框

 

 效果:

 将展开行移除掉

 

效果:

 添加索引列

 

 

 

效果:

 添加纵向边框

 

效果:

 

 取消高亮

 

使用自定义模板列渲染后面的三列数据

是否有效——对应的是cat_deleted:

false表示有效,我们要把它渲染成一个绿色的对勾

true表示无效,我们要把它渲染成一个红色的叉号

官方文档

渲染成一个自定义模板列,type和template是用来指定在自定义模板列的

 我们自定义一个新的列

 在表格中定义一个插槽,它的名字为isok

通过作用域插槽的形式接收到 这一行的数据

 渲染对勾和叉号这两个小图标

按需渲染

 改变小图标颜色

 效果:

 排序——对应的是cat_level

0——一级分类

1——二级分类

2——三级分类

创建一个新的模板列

 渲染不同等级的标签

 按需渲染

 效果:

 

 创建一个新的模板列

 

 渲染两个button图标按钮

效果: 

 添加分页的页码条

 

定义一个监听pagesize改变的事件处理函数,监听到新的pagesize,就可以赋值给data中的pagesize,并且重新刷新一下数据

 定义一个监听pagenum改变的事件处理函数,把监听到最新的pagenum赋值给data中的pagenum,并且刷新一下数据

 current-page——表示当前第几页,需要把data中pagenum绑定给current-page

page-sizes——表示可选择的显示数据的条数

page-size——表示当前每页显示多少条数据 ,需要把data中的pagesize绑定给page-size

total——数据总数,需要把data中的total绑定给它

 效果:

 给“添加分类”和表格之间增加间隔

 

 效果:

 四.功能

1.添加分类

(1)添加一个对话框

 

(2) 在data中定义addCateDialogVisible为false

 (3)给“添加分类”按钮绑定一个单击事件

 (4)在methods中定义showAddCateDialog这个函数

 (5)在对话框中添加表单

 (6)在data中定义添加分类的表单数据对象

 (7)在data中定义添加分类表单的验证规则对象

 效果:

 (8)定义一个函数,用来获取父级分类的数据列表

获取父级分类列表,只需要加载前两级的就可以了

(9)在data中定义一个空数组,用来保存获取到的父级分类数据列表

(10)点击“添加分类”弹出对话框的事件处理函数中调用getParentCateList函数

(11) 将获取到的父级分类数据赋值给data中的parentCateList

(12)渲染父级分类的级联选择器

options——指定当前级联选择器的数据源

change——选择项发生变化就会触发这个函数

v-model——绑定我们选中的值,这里我们需要绑定一个数组

props——用来指定配置对象

不要忘记在plugins/element.js中导入并注册

 在data中定义一个数组和一个配置对象

 在methods中定义事件处理函数

 在公共样式上设置

级联选择框设置占满整个区域

效果:

设置清空选项

 

 效果:

设置选中任意一级的分类

 效果:

(13)监听级联选择器的改变,更新父级分类的id和分类的等级

假设a为分类名称

1.没有选择父级分类,selectedKeys数组中的length为0,那么a为父级,父级的id为0,a的等级为0

2.选择了“大家电”,selectedKeys数组中的length为1,父级id为数组中最后一项,那么a的父级id为1,a的等级为1

3.选择了“大家电/电视”,selectedKeys数组中的length为2,父级id为数组中最后一项,那么a的父级id为3,a的等级为2

如何获取数组中最后一项呢?

array[array.length-1]——array数组的最后一项

所以我们可以得到

父级id=this.selectedKeys[this.selectedKeys.length-1]

a的等级=this.selectedKeys.length

 (14)给确定按钮绑定单击事件处理函数

测试一下

 

(15)监听对话框关闭事件,重置表单数据

给对话框绑定一个函数

 在methods中定义函数,重置表单

 分类名称被重置了,但是父级分类并没有被重置

所以我们需要重置级联选择器绑定的数组,还有表单里的数据对象里的cat_level和cat_pid都重置为0

 (16)点击确定按钮,要对表单进行预验证

预验证通过之后发起请求,从而添加新的分类

 

(17)发送数据请求

失败则提示“添加分类失败!”,成功则提示“添加分类成功!”并且刷新一下数据列表,关闭对话框

 效果:

五.提交代码

git branch ——查看当前所处分支

git status——查看当前状态,此时为红色

git add .——添加到暂存区

git status——查看当前状态,此时变成绿色

git commit -m "完成了分类功能的开发"——提交到了本地仓库

git push——将本地的goods_cate分支推送到云端

git checkout master——切换到主分支

git merge goods_cate——主动合并goods_cate分支

git push——将本地的主分支推送到云端

举报

相关推荐

0 条评论