120.(前端)商品管理增加基本信息优化——控制tabs切换下一级目录

1.概述

1.1保存下输入的数据

首先，对于级联选择器，我们应该使用三个id去获取他的三级目录，当级联选择器的内容发生改变时，changeSeletor()就应该对应的保存id值

1.2tabs验证是否可以切换到下一级

当我们要去填写动态参数时，必须对商品分类的信息做一个填写，此时，就应该使用before-leave去判断是否可以进入到下一级

2.主要代码展示

<el-tabs v-model="active" :tab-position="'left'" :before-leave="beforeLeave">
// 验证是否能跳转到下一级tabs的函数
        beforeLeave(activeName, oldActiveName){
            // 验证是否存在三级目录的输入
            if(this.selectKeys.length < 3) {
                this.$msg.error("请先输入三级商品分类信息！！！！")
                return false
            }
            // console.log(activeName)
            // console.log(oldActiveName)
        }
1
2
3
4
5
6
7
8
9
10
11

3.效果展示

4.完整代码展示

<template>
    <div>
        
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <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-alert title="增加商品信息" type="info" center show-icon>el-alert>
            
                <el-steps :active="active-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>
            
            <el-form :model="addForm" ref="addRef" :rules="addRules" label-position="top">
                <el-tabs v-model="active" :tab-position="'left'" :before-leave="beforeLeave">
                    <el-tab-pane label="基本信息" name="0">
                        
                        <el-form-item label="商品名称" prop="name">
                            <el-input v-model="addForm.name">el-input>
                        el-form-item>
                        <el-form-item label="商品价格" prop="price">
                            <el-input v-model="addForm.price">el-input>
                        el-form-item>
                        <el-form-item label="商品数量" prop="number">
                            <el-input v-model="addForm.number">el-input>
                        el-form-item>
                        <el-form-item label="商品权重" prop="weight">
                            <el-input v-model="addForm.weight">el-input>
                        el-form-item>
                        <el-form-item label="商品分类">
                            <el-cascader v-model="selectKeys" :options="cateIdList"
                                :props="{ expandTrigger: 'hover', label:'name', value:'id', checkStrictly: true }"
                                @change="changeSeletor"
                                clearable
                                separator=">">
                            el-cascader>
                        el-form-item>
                    el-tab-pane>
                    <el-tab-pane label="商品静态参数" name="1">商品静态参数el-tab-pane>
                    <el-tab-pane label="商品动态参数" name="2">商品动态参数el-tab-pane>
                    <el-tab-pane label="商品图片" name="3">商品图片el-tab-pane>
                    <el-tab-pane label="商品内容" name="4">商品内容el-tab-pane>
                el-tabs>
            el-form>
            el-card>
    div>
template>

<script>
export default {
    data() {
        return {
            active: '0',
            addForm:{
                'name':'',
                'price':0,
                'number':0,
                'weight':0,
                'cid_one':0,
                'cid_two':0,
                'cid_three':0
            },
            addRules:{
                name:[{required:true, message:"请输入填写商品名称", tigger:'blur'}],
                price:[{required:true, message:"请输入填写商品价格", tigger:'blur'}],
                number:[{required:true, message:"请输入填写商品数量", tigger:'blur'}],
                weight:[{required:true, message:"请输入填写商品权重", tigger:'blur'}]
            },
            cateIdList:[],
            selectKeys:[]
        }
    },
    created() {
        this.getCateList()
    },
    methods: {
        // 获取全部列表，用于展示
        async getCateList() {
            const { data: resp } = await this.$axios.get('/api/category_list')
            if (resp.status !== 200) return this.$msg.error(resp.msg)
            this.cateIdList = resp.data.data
        },
        // 发生变更时
        changeSeletor() {
            if(this.selectKeys.length < 3) return
            this.addForm.cid_one = this.selectKeys[0]
            this.addForm.cid_two = this.selectKeys[1]
            this.addForm.cid_three = this.selectKeys[2]
            console.log(this.addForm);
        },
        // 验证是否能跳转到下一级tabs的函数
        beforeLeave(activeName, oldActiveName){
            // 验证是否存在三级目录的输入
            if(this.selectKeys.length < 3) {
                this.$msg.error("请先输入三级商品分类信息！！！！")
                return false
            }
            // console.log(activeName)
            // console.log(oldActiveName)
        }
    }
}
script>

<style lang="less" scoped>
.el-tabs{
    margin-top: 10px
}
.el-alert{
    margin-bottom: 5px;
}
.el-cascader{
    width:500px
}
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126