1、商品列表页面
商品列表的页面如图：这个页面其实比较简单，面包屑导航、搜索框、添加商品按钮，以及下面的表格，代码如图：
基本比较容易，就一个过滤器需要实现，本身的创建时间是以毫秒显示出来，这里需要格式化为年月日时分秒的格式。
首先在main.js中注册了全局过滤器（以下出自vue.js官网）
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
{{ message | capitalize }}
< div v-bind:id=“rawId | formatId”>
你可以在一个组件的选项中定义本地的过滤器
filters: {
capitalize: function (value) {
if (!value) return ‘’
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
或者在创建 Vue 实例之前全局定义过滤器：
Vue.filter(‘capitalize’, function (value) { if (!value) return ‘’
value = value.toString() return value.charAt(0).toUpperCase() +
value.slice(1) })new Vue({ // … })
也就是说在对文本格式化式，定义一个过滤器，可以对文本实现过滤的效果。
这里我们考虑定义一个全局的格式化时间的过滤器，以便多次用到。以下为我的代码：
dataFormat为过滤器的名字，originVal为传进的值，首先需要将毫秒数据转换成Data型，获取月份时记得加1，因为它本身获取的是0-11，月份只比本身的少1，要了解es2017的padStart的可以看这里
就是说要将字符串不足2位的在前面补0，但是由于该函数只接收字符串，所以+‘’将Number转换成String才可以。
Vue.filter('dataFormat', function(originVal) {
const dt = new Date(originVal)
const y = dt.getFullYear()
const m = (dt.getMonth() + 1 + '').padStart(2, '0')
const d = (dt.getDay() + '').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}`
})
然后添加到需要格式化的数据身上即可
2、点击添加商品的按钮，出现下面的添加页面
通过编程式导航可跳转到商品添加页面，首先为该按钮添加事件。
<el-button type="primary" @click="goAddpage">添加商品</el-button>
然后利用vue-router的push操作
//通过编程式导航跳转到商品添加页面
goAddpage(){
this.$router.push('/goods/add')
}
此时，需要在router.js中配置该路由指向的组件，这里是跳转到/good/add
3、在可以跳转之后，商品添加页面的创建
渲染2添加页面的结构，如下，分别包括步骤栏组件，tab栏区域
首先需要注册组件el-steps和el-step（含状态步骤条
每一步骤显示出该步骤的状态。）
<el-steps :space="200" :active="activeIndex-0" finish-status="success" align-center>
<el-step title="基本信息"></el-step>
<el-step title="商品参数"></el-step>
<el-step title="商品属性"></el-step>
<el-step title="商品图片"></el-step>
<el-step title="商品内容"></el-step>
<el-step title="完成"></el-step>
</el-steps>
active表示设置当前激活步骤，其数据类型为number，当激活对应序号时，出现激活步骤。
-
tab栏怎么渲染出来呢？这里，将tab的标签labels在左边显示，可以通过 tab-position 设置标签的位置,对不同标签复制不同名字。
-
接下来，需要首先步骤条和tab栏的数据联动效果，可可看到，tabs栏标签通过v-model来指定激活的面板(绑定值，选中选项卡的 name),与每个tab的name绑定，那么如果，我们将步骤栏的索引值与tab的值设为同一组[0,1,2,3,4]，即设置公用的一个 activeIndex实现数据联动效果,但是这里绑定的值是字符串类型，而步骤栏确实数值型，这怎么办呢？我们考虑到将activeIndex本身设置为0，在步骤栏的:active上-0，实现隐式转换。
-
为什么在外层加了个e–form表单呢，刚开始没想明白，后来听老师说，我们这里将页面拆分成了5个不同的pane面板（el-tab-pane），每个tab上只维护当前数据的部分数据，所以用一个form表单将其包裹。在element ui中粘贴带有表单验证的el-form。
<el-form :model="addForm" status-icon :rules="addFormRules" ref="addFormRef" label-width="100px" label-position="top">
<el-tabs :tab-position="'left'" v-model="activeIndex" :before-leave="beforeTabLeave"
@tab-click="tabClicked">
<el-tab-pane label="基本信息" name="0">
<el-form-item label="商品名称" prop="goods_name">
<el-input v-model="addForm.goods_name"></el-input>
</el-form-item>
<el-form-item label="商品价格" prop="goods_price">
<el-input v-model="addForm.goods_price" type="number"></el-input>
</el-form-item>
<el-form-item label="商品重量" prop="goods_weight">
<el-input v-model="addForm.goods_weight"></el-input>
</el-form-item>
<el-form-item label="商品数量" prop="goods_number" type="number">
<el-input v-model="addForm.goods_number"></el-input>
</el-form-item>
<el-form-item label="商品分类" prop="goods_cat">
<el-cascader v-model="addForm.goods_cat" :options="cateList"
:props="{ expandTrigger: 'hover', value:'cat_id',label:'cat_name',children:'children'}" @change="handleChange"></el-cascader>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="商品参数" name="1">
<!-- 渲染表单的Item项 -->
<el-form-item v-for="item in manyTabData" :label="item.attr_name" :key="item.attr_id">
<!-- 复选框组 -->
<el-checkbox-group v-model="item.attr_vals">
<el-checkbox :label="cb" v-for="(cb,i) in item.attr_vals" :key="i" border>
</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="商品属性" name="2">
<el-form-item :label="item.attr_name" v-for="item in onlyTabData" :key="item.attr_id">
<!-- 复选框组 -->
<el-input v-model="item.attr_vals">
</el-input>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="商品图片" name="3">
<!-- action 图片要上传的API地址 -->
<el-upload :action="uploadURL" :on-preview="handlePreview" :headers="headerObj"
:on-remove="handleRemove" list-type="picture" :on-success="handleSuccess">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-tab-pane>
<el-tab-pane label="商品内容" name="4">
<!-- //富文本编辑器组件 -->
<quill-editor v-model="addForm.goods_introduce"></quill-editor>
<!-- 添加商品按钮 -->
<el-button type="primary" class="btnAdd" @click="add">添加商品</el-button>
</el-tab-pane>
</el-tabs>
</el-form>
在第一个tab栏，因为这里是提交商品，我们需要使用post提交数据，而且通过v-model将输入的值都传到后台，实现添加和保存。首先看这里的api文档，有对键入的值的类型和名称进行说明，所以，在data里面定义一个addForm，通过:prop（表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的）绑定到表单上，在每个form-item中通过v-model将addForm数组中的value与input:text双向绑定。还添加了自定义规则，当没有填入信息时检错。
注意：最下行实现了一个级联框，前面文章已经提过。
当基本信息填完后，需要实现一个效果，如果所选商品分类不是三级标签，如何阻止页签跳转。
在el-tabs上绑定:before-leave=“beforeTabLeave”，可以监听标签页的切换事件。在事件的处理函数中判断是否处于第一个标签且选中级联框的三级种类，允许或阻止跳转，弹出error message。
首先级联框不能选中一级和二级一下分类，选中则清空。
切换事件是通过before-leave属性，其接受一个function，参数包括新的标签页name（前往的）和旧的标签页（所在），判断if(oldActiveName===‘0’ && this.addForm.goods_cat.length!==3),如果不符合条件，返回false，reject，阻止切换。
beforeTabLeave(activeName,oldActiveName){
//console.log(activeName);
if(oldActiveName==='0' && this.addForm.goods_cat.length!==3)
//当不符合条件(在第一栏，且级联选择器没有选中）时，不允许切换
{this.$message.error("请先选择商品分类")
return false
}
}
- 当基本信息填完，进入动态参数面板，渲染下一栏（未完待续）
扫一扫
2438
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
