vue电商后台管理系统--分类参数篇

通过路由加载分类参数组件页面

渲染分类参数页面的基本UI结构

<!--  -->
<template>
    <div>
    <!--面包屑导航区-->
    <el-breadcrumb separator="/">
        <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 :closable="false"
        title="注意：只允许为第三级分类设置相关参数！"
        type="warning" show-icon>
        </el-alert>
    <!-- 选择商品分类区域 -->
    <el-row>
        <el-col>
            <span>选择商品分类：</span>
            <!-- 选择商品分类的级联选择框 -->

        </el-col>
    </el-row>

    </el-card>
    </div>
</template>

<script>
export default {
   
    data () {
   
        return {
   
            
        }
    },

    created(){
   
        
    },
    methods: {
   
        
    },
}

</script>
<style lang='less' scoped>
.el-row{
   
    margin: 15px 0;
}
</style>

调用API获取商品分类列表的数据

methods: {
   
        async getCateList(){
   
            const {
   data : res} = await this.$http.get('categories')
            if(res.meta.status !== 200) return this.$message.error('获取商品分类失败！')
            // console.log(res.data)
            this.cateList = res.data
            console.log(res)
        }
    },

渲染商品分类的级联选择框

<!-- 选择商品分类区域 -->
    <el-row>
        <el-col>
            <span>选择商品分类：</span>
            <!-- 选择商品分类的级联选择框 -->
            <!-- options用来指定数据源 -->
                <!-- props用来指定配置对象 -->
                <el-cascader
                    clearable
                    expandTrigger="hover"
                    v-model="selectedCatKeys"
                    :options="cateList"
                    :props="cateProps"
                    @change="handleChange"></el-cascader>
        </el-col>
    </el-row>

<script>
export default {
   
    data () {
   
        return {
   
            // 商品分类列表
            cateList: [],
            // 级联选择框的对象
            cateProps: {
   
                value: 'cat_id',
                label: 'cat_name',
                children: 'children'
            },
            // 级联选择框双向绑定的数组
            selectedCatKeys: []
        }
    },

    created(){
   
        // 获取所有的商品分类列表
        this.getCateList()
    },
    methods: {
   
        async getCateList(){
   
            const {
   data : res} = await this.$http.get('categories')
            if(res.meta.status !== 200) return this.$message.error('获取商品分类失败！')
            // console.log(res.data)
            this.cateList