1. 具体实现
1.1 <el-steps>
主要是用来控制每个tabs的流程
1.2 <el-tabs>
这里将form表单包裹在最外层的原因是,在tabs中有多个el-tab-pane项,且在每个项中有可能进行商品信息的增加或者修改,为了让多个项的修改信息统一上传,因此这里使用一个form表单包裹全部
tips:不能讲form表单作为el-tabs的子元素,因为tabs的直接子元素只能是el-tab-pane
在<el-tabs>中,v-model主要用来绑定选项卡中的name值,因此我们需要给每个选项卡<el-tab-pane>定义name值,当你切换的时候,v-model就会接收当前所切换的tab-pane的值(这样我们就可以根据这个name值去判断当前是哪个tab-pane然后执行相应的代码逻辑),因此这里我们为其绑定activeIndex变量,绑定activeIndex变量是为了让其于<el-steps>关联起来,对比steps中active接收number、而el-tabs的v-model接收string,因此我们在el-tab-pane的name绑定name="0",name="1...的形式,然后你切换的时候el-tabs可以接收“0"or"1"or....的方式,因此将绑定在data中的activeIndex变成字符串的形式,
问题,tab-step接收的是number?那我们怎么将"0"、“1”等字符串的形式转成数字类型呢?那很简单,直接在el-steps中使用 :active="activeIndex - 0"即可。这样便可以达到关联的效果。
2. 添加商品部分具体实现
2.0 这里先提一下包裹在最外层的<el-form>用法
2.1 商品表单
- 第一部分(商品信息)
这一部分主要是输入商品的基本信息和一个选择商品所属分类的选项,其中用到的是主要是<el-form-item>、<el-input>和<el-cascader>组件,主要难点是在于<el-cascader>,所以这里主要讲一下<el-cascader>级联选择器的使用:
关联的级联选择器重cateList数据结构如下:
在级联选择器重使用 @change="handleChange"来监听用户选择的变化
- 第二部分与第三部分(商品参数和商品属性)
此时需要进行tab的切换,但是这里业务做了一个约束条件,即当你不选择商品的分类时(即级联选择器项)不能进入第二个tab项,相关的逻辑如下:
然后第二部分主要是获取数据然后显示即可,这里主要说明一下商品参数下的电视机2下的属性项。首先先获取商品参数和商品属性数据,具体代码如下,当this.activeIndex === "2"的时候,获取商品参数信息,当this.activeIndex === "3"的时候获取商品属性信息
//监听更新,在<el-tabs>中tabs变化的时候
async clickTabs(e) {
// console.log(this.activeIndex)
//即当切换到商品参数的时候,此时获取动态参数
//由于你点击tabs切换的时候activeIndex会实时更新,
//因此这里直接直接监听activeIndex的值去判断你点击的是哪一个
if (this.activeIndex === "2") {
const { data: res } = await this.$http.get(
`categories/${this.cateId}/attributes`,
{
params: {
sel: "many",
},
}
)
if (res.meta.status !== 200) {
this.$message.error("获取动态参数失败")
}
res.data.forEach((item) => {
item.attr_vals =
item.attr_vals.length === 0 ? [] : item.attr_vals.split(",")
})
this.manyList = res.data
}
//静态参数
if (this.activeIndex === "3") {
const { data: res } = await this.$http.get(
`categories/${this.cateId}/attributes`,
{
params: {
sel: "only",
},
}
)
if (res.meta.status !== 200) {
this.$message.error("获取动态参数失败")
}
this.onlyList = res.data
}
},
这里的主要作用是,由于返回的attr_vals数据是以,分隔而成的字符串的形式,但是显示要求一个一个的显示,因此这里使用forEach遍历将其以“,”符号分隔成为数组的形式,然后再遍历显示
效果如下:
- 第四部分(上传图片)
相关配置
actionn:配置上传的路径, 这里使用完整的服务地址!!因为上传图片upload组件使用的上传请求模式与我们写的不一样,我们主要是利用了请求拦截,那么每一个请求发送前都会被我们拦截下来,而upload不行,因此你要根据这个组件要求进行相关配置
//预览
handlePreview(file) {
this.imgOnline = file.url
this.imgVisible = true
},
//删除
handleRemove(file) {
const index = this.addForm.imgList.findIndex((x) => {
return (x = file.response.data.tmp_path)
})
this.addForm.imgList.splice(index, 1)
},
//图片上传成功时候回调
uploadImgs(file) {
if (file.meta.status !== 200) {
this.$message.error("上传照片失败")
}
this.addForm.imgList.push(file.data.tmp_path)
},
- 第五部分(商品内容)
这里使用了富文本技术
- 首先需要先安装:
- 引入
- 使用
- 效果
- 最后是提交表单操作
- lodash的使用
1.首先需要先下载“lodash”
2.然后引入import _ form 'loadsh"
3.使用
2 具体上效果图
- 跳转
当点击添加商品的时候跳转到'add'路由页面,所有商品信息的操作均在‘goods’路由页面中进行。
2.add路由页面
3.tabs切换效果
其中添加商品的页面由多个部分组分,每二个部分之间的切换主要由tabs来切换
4. 整体结构