2020 零基础到快速开发 Vue全家桶开发电商管理系统（Element-UI）商品分类篇

文章目录

1、引言
2、商品分类篇
- 2.1 通过路由加载商品分类组件
- 2. 2 绘制商品分类组件的基本页面布局
- 2.3 调用API获取商品分类列表数据
- 2.4 初步使用vue-table-with-tree-grid树形表格组件
- 2.5 使用自定义模板列渲染数据表格
- 2.6 渲染排序和操作对应的UI结构
- 2.7 实现分页功能
- 2.8 渲染添加分类的对话框和表单
- 2.9 获取父级分类数据列表
- 2.10 渲染级联选择器
- 2.11 根据父分类的变化处理表单中的数据
- 2.12 在对话框的close事件中重置表单数据
- 2.13 完成添加分类的操作
3、结束语
点击进入Vue❤学习专栏~

1、引言

寒假是用来反超的！一起来学习Vue把，这篇博客是关于商品分类，请多指教~

2、商品分类篇

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

2. 2 绘制商品分类组件的基本页面布局

<template><div><!--面包屑导航区--><el-breadcrumb separator="/"><el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item><el-breadcrumb-item>商品管理</el-breadcrumb-item><el-breadcrumb-item>商品分类</el-breadcrumb-item></el-breadcrumb><!--卡片视图区域--><el-card ><!--添加分类按钮--><el-row><el-col><el-button type="primary">添加分类</el-button></el-col></el-row><!-- 表格 --><!-- 分页区域 --></el-card></div>
</template>

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

     // 获取商品分类数据async getCateList(){const {data : res} = await this.$http.get('categories',{params: this.queryInfo})if(res.meta.status !== 200) return this.$message.error('获取商品分类列表失败')//console.log(res)// 把数据赋值给cateListthis.cateList = res.data.result// 为总数据条数赋值this.total = res.data.total}

2.4 初步使用vue-table-with-tree-grid树形表格组件

需要安装新的依赖进入我们的vue ui 然后选择运行依赖输入vue-table-with-tree-grid

或者使用npm指令进行安装

npm i vue-table-with-tree-grid -S

或者使用yarn指令

yarn add vue-table-with-tree-grid

然后再main.js中导入全局组件，为我们后续使用

     <!-- 表格 --><tree-table :data="cateList" :columns="columns":selection-type=false :expand-type=false show-index index-text="#" border :show-row-hover=false></tree-table>

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

          <!-- 表格 --><tree-table :data="cateList" :columns="columns":selection-type=false :expand-type=false show-index index-text="#" border :show-row-hover=false><template slot="isOk"  scope="scope"><i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color: #1E90FF;"></i><i class="el-icon-error" v-else style="color: red;"></i></template></tree-table>

2.6 渲染排序和操作对应的UI结构

<template><div><!--面包屑导航区--><el-breadcrumb separator="/"><el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item><el-breadcrumb-item>商品管理</el-breadcrumb-item><el-breadcrumb-item>商品分类</el-breadcrumb-item></el-breadcrumb><!--卡片视图区域--><el-card ><!--添加分类按钮--><el-row><el-col><el-button type="primary">添加分类</el-button></el-col></el-row><!-- 表格 --><tree-table :data="cateList" :columns="columns":selection-type=false :expand-type=false show-index index-text="#" border :show-row-hover=false><!-- 是否有效列 --><template slot="isOk"  scope="scope"><i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color: #1E90FF;"></i><i class="el-icon-error" v-else style="color: red;"></i></template><!-- 排序列 --><template slot="order" scope="scope"><el-tag size="mini" v-if="scope.row.cat_level==0">一级</el-tag><el-tag size="mini" type="success" v-else-if="scope.row.cat_level==1">二级</el-tag><el-tag size="mini" type="warning" v-else>三级</el-tag></template><!-- 操作列 --><template slot="opt" scope=""><el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button><el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button></template></tree-table><!-- 分页区域 --></el-card></div>
</template>

2.7 实现分页功能

<!--  -->
<template><div><!--面包屑导航区--><el-breadcrumb separator="/"><el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item><el-breadcrumb-item>商品管理</el-breadcrumb-item><el-breadcrumb-item>商品分类</el-breadcrumb-item></el-breadcrumb><!--卡片视图区域--><el-card ><!--添加分类按钮--><el-row><el-col><el-button type="primary">添加分类</el-button></el-col></el-row><!-- 表格 --><tree-table class="treeTable" :data="cateList" :columns="columns":selection-type=false :expand-type=false show-index index-text="#" border :show-row-hover=false><!-- 是否有效列 --><template slot="isOk"  scope="scope"><i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color: #1E90FF;"></i><i class="el-icon-error" v-else style="color: red;"></i></template><!-- 排序列 --><template slot="order" scope="scope"><el-tag size="mini" v-if="scope.row.cat_level==0">一级</el-tag><el-tag size="mini" type="success" v-else-if="scope.row.cat_level==1">二级</el-tag><el-tag size="mini" type="warning" v-else>三级</el-tag></template><!-- 操作列 --><template slot="opt" scope=""><el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button><el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button></template></tree-table><!-- 分页区域 --><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="queryInfo.pagenum":page-sizes="[3, 5, 10, 15]":page-size="queryInfo.pagesize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></el-card></div>
</template>

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

 <!-- 添加分类的对话框 --><el-dialogtitle="添加分类":visible.sync="addCateDialogVisible"width="50%"><!-- 添加分类的表单 --><el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px" ><el-form-item label="分类名称：" prop="cat_name"><el-input v-model="addCateForm.cat_name"></el-input></el-form-item><el-form-item label="父级分类：" ></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="addCateDialogVisible = false">取 消</el-button><el-button type="primary" @click="addCateDialogVisible = false">确 定</el-button></span></el-dialog>

2.9 获取父级分类数据列表

         // 点击添加分类按钮 显示对话框showAddCateDialog(){// 先获取父级分类的数据列表this.getParentCateList()this.addCateDialogVisible =true},// 获取父级分类的数据列表async getParentCateList(){const {data : res} = await this.$http.get('categories',{params: {type: 2}})if(res.meta.status !== 200) return this.$message.error('获取父级分类列表失败')console.log(res.data)this.ParentCateList = res.data}

2.10 渲染级联选择器

         <!-- 添加分类的表单 --><el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px" ><el-form-item label="分类名称：" prop="cat_name"><el-input v-model="addCateForm.cat_name"></el-input></el-form-item><el-form-item label="父级分类：" ><!-- options用来指定数据源 --><!-- props用来指定配置对象 --><el-cascaderclearableexpandTrigger="hover"v-model="selectedKeys":options="ParentCateList":props="cascaderProps"@change="parentCateChanged"></el-cascader></el-form-item></el-form>

      // 父级分类数据列表ParentCateList: [],// 指定级联选择器的配置对象cascaderProps: {value: 'cat_id',label: 'cat_name',children: 'children',checkStrictly :true,expandTrigger: 'hover'},// 选中的父级分类的id数组selectedKeys: []

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

     // 监听选择项发生变化事件parentCateChanged(){// 如果selectedKeys数组中的length大于0，证明选中了父级分类// 反之，就没有选中任 何父级分类if(this.selectedKeys.length >0){//父级分类的idthis.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length -1]//为当前分类的等级赋值this.addCateForm.cat_level = this.selectedKeys.lengthconsole.log(this.addCateForm.cat_pid)return}else{// 如果等于0this.addCateForm.cat_pid = 0this.addCateForm.cat_level = 0}},// 点击确定按钮，添加新的分类addCate(){console.log(this.addCateForm)}

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

     // 监听对话框的关闭事件，重置表单数据addCateDialogClosed(){this.$refs.addCateFormRef.resetFields()this.selectedKeys = []// 重置父级分类this.addCateForm.cat_pid = 0this.addCateForm.cat_level = 0}

2.13 完成添加分类的操作

  // 点击确定按钮，添加新的分类addCate(){// console.log(this.addCateForm)this.$refs.addCateFormRef.validate(async valid => {// 预校验失败if(!valid) return const {data:res} = await this.$http.post('categories',this.addCateForm)if(res.meta.status !== 201) return this.$message.error('添加分类失败!')this.$message.success('添加分类成功!')// 重新刷新分类列表，并隐藏对话框this.getCateList()this.addCateDialogVisible = false})},// 监听对话框的关闭事件，重置表单数据addCateDialogClosed(){this.$refs.addCateFormRef.resetFields()this.selectedKeys = []// 重置父级分类this.addCateForm.cat_pid = 0this.addCateForm.cat_level = 0}

这里我就简单测试一下最后实现效果，首先我们添加一个一级分类test1，然后再添加一个test2 他的父级是test1 最后，看一下效果：

最后结果与实际想要的结果达成一致，开发完成~

3、结束语

至此，我们的功能就完成了！

Vue全家桶开发电商管理系统码云地址，欢迎一起来学习~

https://gitee.com/Chocolate666/vue_shop

最后，看完本篇博客后，觉得挺有帮助的话，可以继续查看专栏其它内容嗷，一起来学习Vue吧~

点击进入Vue❤学习专栏~

学如逆水行舟，不进则退

2020 零基础到快速开发 Vue全家桶开发电商管理系统（Element-UI）商品分类篇相关推荐

elemenetui 布局_2020 零基础到快速开发 Vue全家桶开发电商管理系统（Element-UI）主页布局开发-Go语言中文社区...
1.引言寒假是用来反超的!一起来学习Vue把,这篇博客是关于项目主页布局,请多指教~ 2.整体布局 3 .主页 3.1 实现基本的主页布局 3.2 美化主页的header区域 3.3 实现导航菜单的 ...
网易云音乐接口+vue全家桶开发一款移动端音乐webApp
网易云音乐接口+vue全家桶开发一款移动端音乐webApp 项目还在develop中,感兴趣想要参与的小伙伴可以私我效果图: 骨架屏首页侧边栏每日推荐歌单播放器(小) 播放器(大) 详细信 ...
vue全家桶开发的一些小技巧和注意事项
作者:沉末_ https://juejin.im/user/5b7c1be9e51d4538b35bfc32 前言用vue全家桶开发一年多了,踩过不少坑,也解决了很多的问题,把其中的一些点记录下来, ...
基于Vue和SpringBoot的电商管理系统的设计与实现
作者主页:Designer 小郑作者简介:Java全栈软件工程师一枚,来自浙江宁波,负责开发管理公司OA项目,专注软件前后端开发(Vue.SpringBoot和微信小程序).系统定制.远程技术指导. ...
vue实战项目：电商管理系统实现步骤笔记(一)
vue实战项目视频地址以及项目文件一.项目概述 1.1电商项目基本业务概述 1.2电商后台管理系统的功能 1.3电商后台管理系统的开发模式(前后端分离) 1.4电商后台管理系统的技术选型 1.4. ...
零基础如何快速上手高精度AI模型开发？
常听技术大佬侃侃而谈AI模型开发,小白不知从何开始? 自动驾驶车辆分割.智慧农业小麦计数.智能硬件垃圾分拣.智慧城市交通流量.结构化文字识别模型定制,这些在视觉.机器学习.OCR等领域具备广泛应用前景 ...
前端开发Vue项目实战：电商后台管理系统（一）前后端搭建
目录 1. 项目概述 2. 前端项目初始化步骤 3. 后台项目的环境安装配置下载安装phpStudy,添加数据库 Postman测试工具验证 1. 项目概述电商项目基本业务概述: 根据不同的应用 ...
前端开发Vue项目实战：电商后台管理系统（二）-- 登录退出功能 --主页界面
目录 1. 登录/退出功能 1.1 登录概述 1.2 token 原理分析 1.3 登录功能实现 1.3.1 Git 创建分支 1.3.2 渲染Login组件并实现路由重定向 1.3.3 设置背景颜色 ...
零基础如何快速入门微信小游戏开发？
随着微信生态中,小程序应用指数级的增长,许多休闲游戏变成为了众多游戏厂商流量变现的新手段.以近期很火的"羊了个羊"为例,它便是我们常常所说的小游戏. 游戏和小游戏的区别要盘点小游 ...