2021 Vue全家桶开发电商管理系统（Element-UI）08 商品列表功能的实现
商品列表功能的实现
1 自定义格式化时间的全局过滤器
打开main.js，创建过滤器
Vue.filter('dateFormat', function (originVal) {const dt = new Date(originVal);const y = dt.getFullYear();const m = (dt.getMonth() + 1 + '').padStart(2, '0');const d = (dt.getDate() + '').padStart(2, '0');const hh = (dt.getHours() + '').padStart(2, '0');const mm = (dt.getMinutes() + '').padStart(2, '0');const ss = (dt.getSeconds() + '').padStart(2, '0');return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
})
在html中使用
<el-table-column label="创建时间" width="200"><template v-slot="scope">{{scope.row.add_time | dateFormat}}</template>
</el-table-column>
2 商品添加页面
2.1 通过编程式导航跳转至商品添加页面
addGoods() {this.$router.push("/goods/add");}
2.2 商品添加页面的布局 （基本布局略）
Steps步骤条使用
使用纵向Tabs标签页
实现步骤条、Tab栏数据联动效果
步骤条和Tab栏共用一个数据项
注意 el-steps用activeIndex-0 保证其为数值
<el-steps :space="200" :active="activeIndex - 0" finish-status="success" align-center>
<el-tabs tab-position="left" v-model="activeIndex">
activeIndex: "0"
禁止标签页切换（当预验证不通过）
beforeTabLeave(activeName, oldActiveName) {if (oldActiveName === "0" && this.addForm.goods_cat.length === 0) {this.$message.error("请先选择商品分类");return false;}
}
CheckBox多选框组的使用
<el-form-item v-for="item in paramList" :key="item.attr_id" :label="item.attr_name"><el-checkbox-group v-model="checkList"><el-checkbox v-for="(item2,i) in item.attr_vals" :key="i" :label="item2" border></el-checkbox></el-checkbox-group>
</el-form-item>
upload上传组件
<el-uploadclass="upload-demo":action="uploadurl":on-preview="handlePreview":on-remove="handleRemove":file-list="fileList"list-type="picture"><el-button size="small" type="primary">点击上传</el-button>
</el-upload>
解决：图像上传失败 请求码400
查看Netword → upload请求→Preview 无效token
原因：upload未使用axios发送请求，未携带token
解决：使用其attribute设置请求头对象
headerObj: {Authorization: window.sessionStorage.getItem("token")
}
使用上传成功钩子on-success处理上次
handleSuccess(response) {console.log(response);// 拼接图片信息对象，push至数组const picInfo = { pic: response.data.tmp_path };this.addForm.pics.push(picInfo);console.log(this.addForm);
}
使用移除钩子on-remove监听移除
handleRemove(file) {// 获取想要删除的临时路径// 获取在pics中的索引值// 移除const path = file.response.data.tmp_path;const index = this.addForm.pics.findIndex(x => x.pic === path);this.addForm.pics.splice(index, 1);console.log(this.addForm.pics);
},
图片大图预览效果
使用on-preview监听，保存点击图片的Url，弹出对话框进行显示。
<!-- 图片预览 -->
<el-dialog title="图片预览" :visible.sync="previewDialogVisible" width="50%"><img :src="previewPath" class="previewimg" alt /><!-- <el-image src="previ"></el-image> -->
</el-dialog>
//处理图片预览效果
handlePreview(file) {this.previewDialogVisible = true;// 1.获取图片的Url地址this.previewPath = file.response.data.url;
},
富文本编辑器
需要安装依赖→运行依赖→vue-quill-editor
点击详情打开文档，选择全局挂载，在main.js中输入以下：
使用：
复制架构，声明数据和方法，添加一个添加商品的btn
表单数据预验证
需要对addForm进行深拷贝，因为我们需要将attr_vals转为字符串，如果直接在本身上转，会报错，因为其绑定在级联选择器上，而其只能绑定数组。
安装深拷贝依赖
安装lodash
使用：
复制架构，声明数据和方法，添加一个添加商品的btn
[外链图片转存中…(img-DHtTMnIe-1610761213669)]
表单数据预验证
需要对addForm进行深拷贝，因为我们需要将attr_vals转为字符串，如果直接在本身上转，会报错，因为其绑定在级联选择器上，而其只能绑定数组。
安装深拷贝依赖
安装lodash
2021 Vue全家桶开发电商管理系统（Element-UI）08 商品列表功能的实现相关推荐
- elemenetui 布局_2020 零基础到快速开发 Vue全家桶开发电商管理系统（Element-UI）主页布局开发-Go语言中文社区...
1.引言 寒假是用来反超的!一起来学习Vue把,这篇博客是关于项目主页布局,请多指教~ 2.整体布局 3 .主页 3.1 实现基本的主页布局 3.2 美化主页的header区域 3.3 实现导航菜单的 ...
- 2020 零基础到快速开发 Vue全家桶开发电商管理系统（Element-UI）商品分类篇
文章目录 1.引言 2.商品分类篇 2.1 通过路由加载商品分类组件 2. 2 绘制商品分类组件的基本页面布局 2.3 调用API获取商品分类列表数据 2.4 初步使用vue-table-with-t ...
- （近5w字）面向小白のVue全家桶开发电商管理系统项目总结文档
引言 这个项目是我第二次做了,第一次做的时候好多地方不是很懂,而现在学习了基础知识后,回过来再做一次,发现原来不是很懂的地方也弄明白了,然后又在B站找了项目实战撸了一把,想通过这篇文章,对其中的模块实 ...
- 基于Vue和SpringBoot的电商管理系统的设计与实现
作者主页:Designer 小郑 作者简介:Java全栈软件工程师一枚,来自浙江宁波,负责开发管理公司OA项目,专注软件前后端开发(Vue.SpringBoot和微信小程序).系统定制.远程技术指导. ...
- vue实战项目：电商管理系统实现步骤笔记(一)
vue实战项目 视频地址以及项目文件 一.项目概述 1.1电商项目基本业务概述 1.2电商后台管理系统的功能 1.3电商后台管理系统的开发模式(前后端分离) 1.4电商后台管理系统的技术选型 1.4. ...
- vue全家桶开发的一些小技巧和注意事项
作者:沉末_ https://juejin.im/user/5b7c1be9e51d4538b35bfc32 前言 用vue全家桶开发一年多了,踩过不少坑,也解决了很多的问题,把其中的一些点记录下来, ...
- 网易云音乐接口+vue全家桶开发一款移动端音乐webApp
网易云音乐接口+vue全家桶开发一款移动端音乐webApp 项目还在develop中,感兴趣想要参与的小伙伴可以私我 效果图: 骨架屏 首页 侧边栏 每日推荐 歌单 播放器(小) 播放器(大) 详细信 ...
- JAVA项目实战开发电商项目案例（八）购物车功能开发
文章目录 1购物车功能演示 2购物车功能模块分析 2.1购物车流程 2.2 数据库表分析 2.3购物车接口分析 2.4关键代码分析 3个人总结 4个人说明 5[我的个人网站](http://www.l ...
- node.js+vue的爱心助农电商管理系统
技术架构 nodejs+vue 功能模块 登录登出模块 农产品信息是每个用户独立存在的,因此用户需要进行登录查看以及操作后台系统.应考虑到用户管理问题,暂没有开放用户注册模块,新用户注册可以联系数据库 ...
最新文章
- python4delphi 设置syspath
- lucene-solr源码编译导入eclipse--转
- 阿里淘宝一直在推的响应式编程到底是个什么鬼？
- 文末送书啦！| Device Mapper，那些你不知道的Docker核心技术
- 深度学习模型训练的一般方法（以DSSM为例）
- luoguP3723 HNOI2017 礼物
- 《构建之法》（第一、二、十六章）读书笔记
- this绑定丢失的问题
- 系统服务器ping偶尔超时,云服务器ping超时原因
- 解析淘口令, 淘口令解析,淘口令检测,淘口令不弹原因
- 求方差FPGA的实现方法
- C#-钉钉开发H5应用-事件订阅
- 蓝牙遥控器连接流程分析
- 天津大学计算机专硕_天津大学计算机技术专硕考研参考书
- Windows常用快捷组合键整理Dos命令基础集合
- 启xin宝app的token算法破解
- java sql报错不能catch_java异常（转） - osc_ioa3fr1w的个人空间 - OSCHINA - 中文开源技术交流社区...
- 2017-11-11 今天的工作任务
- MPLAB X IDE v6.00_项目属性（Projiect Properties）_无法更改设置
- 【ANSYS Workbench仿真】如果后处理添加命令流显示渗透压力？