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

最新推荐文章于 2023-01-30 09:00:02 发布

zyyyyyy24

最新推荐文章于 2023-01-30 09:00:02 发布

阅读量616

点赞数

分类专栏：前端 vue

本文链接：https://blog.csdn.net/zyyyyyy24/article/details/119697193

版权

这篇博客详细介绍了如何在Vue电商后台管理系统中实现分类参数功能，包括通过路由加载分类参数组件，渲染UI结构，调用API获取分类列表，控制级联选择框选中范围，实现三级分类选中限制，添加参数按钮的禁用状态计算，以及参数列表的渲染、添加、删除等操作。

摘要由CSDN通过智能技术生成

通过路由加载分类参数组件页面
在这里插入图片描述

渲染分类参数页面的基本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.c

最低0.47元/天解锁文章