时间过滤器(Vue全局注册, 把时间戳格式化)
.padStart(2, \'0\')如果字符串不足两位, 前面补齐一个’0’
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}` })搜索, 删除, 编辑功能
1.4 新增功能创立新路由
页面结构:
面包屑 卡片 警告栏
步骤条
动态为其赋值上索引属性
步骤条绑定的是数字
加入侧边栏
添加表单
嵌套关系: form 包裹 tabs
设置label位置的属性: label-position
添加表单属性
商品分类(级联选择器)
获取/categories的商品分类数据
判断选中是否为三级不是的话变为空数组
没有选择商品分类不能跳转
加入tabs的一个拦截函数before-leave
return false的话则不会触发菜单切换
获取动态参数
给tabs绑定tab-click, 再进行判断
使用checkbox渲染标签
复选框样式优化(重置margin属性)
获取静态参数
给tabs绑定tab-click
图片上传模块
上传出错: 无效token
加上header属性
通过on-success绑定一个事件并传回response把响应的临时路径保存到表单数组
移除图片
添加on-remove事件的回调函数
参数可以获取到file=>这个图片信息, 然后再addForm中把图片splice掉
图片预览
通过一个dialog进行实现
提交表单
拷贝级联表双向绑定的数组,并拷贝一份给form
二. 自己做遇到的问题 2.1 商品分类table的lazy-load失效:tree-props要有haschildren属性
2.2 el-row, el-col问题如果不给el-col都加上span属性, 不会显示在同一行?
2.3 全局style在vue文件可以引入两个style可以一个有scoped一个没有
2.4 tabs-pane绑定的name在before-leave中得以看出他的name是string类型
2.5 复选框发现点击一个会消失一个
浅拷贝:
this.addGoodForm.goods_vals = [...this.manyParamsList]
这样的做法是让表单数据与传来的参数数据第一层分离,
但是出现问题点击一个会选择全部
原因: 只有第一层拷贝, 剩下的也是直接引用
解决方法: 使用深拷贝
深拷贝
① lodash 插件
② JSON.parse(JSON.stringify( targetObj )) 转换为JSON格式再转换回来
import Vue from \'vue\' const deepClone = obj => { // 判断类型都否需要深拷贝 const isObject = args => (typeof args === \'object\' || typeof args === \'function\') && typeof args !== \'undefined\' // 不是则报一个错 if (!isObject) throw new Error(\'Not Reference Types\') // 判断是否为数组并赋予Array原型 let newObj = Array.isArray(obj) ? [...obj] : { ...obj } Reflect.ownKeys(newObj).map(key => { // 判断子结点是仍为对象, 如果是则递归 newObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key] }) return newObj } // 全局导入vue Vue.prototype.$deepClone = deepClone
用这个方法可以把参数列表与复选框的值给分离
2.6 图片上传file-list的作用???
图片的src拼接要加上协议比如开头要加
三. 基本布局实现 四. 内容渲染 4.1 省份级联表传入js文件
4.2 绘制echarts图标https://echarts.apache.org/zh/index.html
可以用深拷贝把请求回来的数据跟options合并
五. 项目优化 5.1 项目优化策略生成打包报告
第三方启用CDN
Element-UI组件按需加载
路由懒加载
首页内容指定
5.2 导入cdn发现的问题
cdn网站
https://cdn.jsdelivr.net/
Import in body of module; reorder to top
import要在所有vue.use()之前
element要把babel配置的东西去掉