2020 零基础到快速开发 Vue全家桶开发电商管理系统（Element-UI）商品分类篇

企业开发 2020-01-21 10:37:52 阅读次数: 0

文章目录

1、引言

寒假是用来反超的！一起来学习Vue把，这篇博客是关于商品分类，请多指教~

2、商品分类篇

2.1 通过路由加载商品分类组件

在这里插入图片描述

在这里插入图片描述

2. 2 绘制商品分类组件的基本页面布局
<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-row>
            <el-col>
                <el-button type="primary">添加分类</el-button>
            </el-col>
        </el-row>

        <!-- 表格 -->

        <!-- 分页区域 -->

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

在这里插入图片描述

2.3 调用API获取商品分类列表数据
		// 获取商品分类数据
        async getCateList(){
            const {data : res} = await this.$http.get('categories',{params: this.queryInfo})
            if(res.meta.status !== 200) return this.$message.error('获取商品分类列表失败')
            //console.log(res)
            // 把数据赋值给cateList
            this.cateList = res.data.result
            // 为总数据条数赋值
            this.total = res.data.total
        }
2.4 初步使用vue-table-with-tree-grid树形表格组件

需要安装新的依赖 进入我们的vue ui 然后选择运行依赖 输入vue-table-with-tree-grid

在这里插入图片描述
或者使用npm指令进行安装

npm i vue-table-with-tree-grid -S

或者使用yarn指令

yarn add vue-table-with-tree-grid

然后再main.js中导入全局组件，为我们后续使用

在这里插入图片描述

		<!-- 表格 -->
        <tree-table :data="cateList" :columns="columns"
            :selection-type=false :expand-type=false show-index index-text="#" border :show-row-hover=false
        ></tree-table>

在这里插入图片描述

2.5 使用自定义模板列渲染数据表格

在这里插入图片描述

 		 <!-- 表格 -->
        <tree-table :data="cateList" :columns="columns"
            :selection-type=false :expand-type=false show-index index-text="#" border :show-row-hover=false
        ><template slot="isOk"  scope="scope">
            <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color: #1E90FF;"></i>
            <i class="el-icon-error" v-else style="color: red;"></i>
        </template>
        </tree-table>
2.6 渲染排序和操作对应的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-row>
            <el-col>
                <el-button type="primary">添加分类</el-button>
            </el-col>
        </el-row>

        <!-- 表格 -->
        <tree-table :data="cateList" :columns="columns"
            :selection-type=false :expand-type=false show-index index-text="#" border :show-row-hover=false
        >
        <!-- 是否有效列 -->
        <template slot="isOk"  scope="scope">
            <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color: #1E90FF;"></i>
            <i class="el-icon-error" v-else style="color: red;"></i>
        </template>
        <!-- 排序列 -->
        <template slot="order" scope="scope">
            <el-tag size="mini" v-if="scope.row.cat_level==0">一级</el-tag>
            <el-tag size="mini" type="success" v-else-if="scope.row.cat_level==1">二级</el-tag>
            <el-tag size="mini" type="warning" v-else>三级</el-tag>
        </template>
        <!-- 操作列 -->
        <template slot="opt" scope="">
            <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
        </template>

        </tree-table>
        <!-- 分页区域 -->

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

在这里插入图片描述

2.7 实现分页功能
<!--  -->
<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-row>
            <el-col>
                <el-button type="primary">添加分类</el-button>
            </el-col>
        </el-row>

        <!-- 表格 -->
        <tree-table class="treeTable" :data="cateList" :columns="columns"
            :selection-type=false :expand-type=false show-index index-text="#" border :show-row-hover=false
        >
        <!-- 是否有效列 -->
        <template slot="isOk"  scope="scope">
            <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color: #1E90FF;"></i>
            <i class="el-icon-error" v-else style="color: red;"></i>
        </template>
        <!-- 排序列 -->
        <template slot="order" scope="scope">
            <el-tag size="mini" v-if="scope.row.cat_level==0">一级</el-tag>
            <el-tag size="mini" type="success" v-else-if="scope.row.cat_level==1">二级</el-tag>
            <el-tag size="mini" type="warning" v-else>三级</el-tag>
        </template>
        <!-- 操作列 -->
        <template slot="opt" scope="">
            <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
        </template>

        </tree-table>
        <!-- 分页区域 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[3, 5, 10, 15]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </el-card>
    </div>
</template>

在这里插入图片描述

2.8 渲染添加分类的对话框和表单
 <!-- 添加分类的对话框 -->
    <el-dialog
        title="添加分类"
        :visible.sync="addCateDialogVisible"
        width="50%"
            >
        <!-- 添加分类的表单 -->
        <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px" >
            <el-form-item label="分类名称：" prop="cat_name">
            <el-input v-model="addCateForm.cat_name"></el-input>
            </el-form-item>
            <el-form-item label="父级分类：" >
            </el-form-item>
        </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="addCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCateDialogVisible = false">确 定</el-button>
    </span>
    </el-dialog>

在这里插入图片描述

2.9 获取父级分类数据列表
 		// 点击添加分类按钮 显示对话框
        showAddCateDialog(){
            // 先获取父级分类的数据列表
            this.getParentCateList()
            this.addCateDialogVisible =true
        },
         // 获取父级分类的数据列表
        async getParentCateList(){
            const {data : res} = await this.$http.get('categories',{params: {type: 2}})
            if(res.meta.status !== 200) return this.$message.error('获取父级分类列表失败')
            console.log(res.data)
            this.ParentCateList = res.data
        }

在这里插入图片描述

2.10 渲染级联选择器
 		<!-- 添加分类的表单 -->
        <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px" >
            <el-form-item label="分类名称：" prop="cat_name">
            <el-input v-model="addCateForm.cat_name"></el-input>
            </el-form-item>
            <el-form-item label="父级分类：" >
                <!-- options用来指定数据源 -->
                <!-- props用来指定配置对象 -->
                <el-cascader
                    clearable
                    expandTrigger="hover"
                    v-model="selectedKeys"
                    :options="ParentCateList"
                    :props="cascaderProps"
                    @change="parentCateChanged"></el-cascader>
            </el-form-item>
        </el-form>

		 // 父级分类数据列表
            ParentCateList: [],
            // 指定级联选择器的配置对象
            cascaderProps: {
                value: 'cat_id',
                label: 'cat_name',
                children: 'children',
                checkStrictly :true,
                expandTrigger: 'hover'
            },
            // 选中的父级分类的id数组
            selectedKeys: []

在这里插入图片描述

2.11 根据父分类的变化处理表单中的数据
 	// 监听选择项发生变化事件
        parentCateChanged(){
            // 如果selectedKeys数组中的length大于0，证明选中了父级分类
            // 反之，就没有选中任 何父级分类
            if(this.selectedKeys.length >0){
                //父级分类的id
                this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length -1]
                //为当前分类的等级赋值
                this.addCateForm.cat_level = this.selectedKeys.length
                console.log(this.addCateForm.cat_pid)
                return
            }else{
                // 如果等于0
                this.addCateForm.cat_pid = 0
                this.addCateForm.cat_level = 0
            }
        },
        // 点击确定按钮，添加新的分类
        addCate(){
            console.log(this.addCateForm)
        }

在这里插入图片描述

2.12 在对话框的close事件中重置表单数据
		// 监听对话框的关闭事件，重置表单数据
        addCateDialogClosed(){
            this.$refs.addCateFormRef.resetFields()
            this.selectedKeys = []
            // 重置父级分类
            this.addCateForm.cat_pid = 0
            this.addCateForm.cat_level = 0
        }
2.13 完成添加分类的操作
	 // 点击确定按钮，添加新的分类
        addCate(){
            // console.log(this.addCateForm)
            this.$refs.addCateFormRef.validate(async valid => {
                // 预校验失败
                if(!valid) return 
                const {data:res} = await this.$http.post('categories',this.addCateForm)
                if(res.meta.status !== 201) return this.$message.error('添加分类失败!')
                this.$message.success('添加分类成功!')
                // 重新刷新分类列表，并隐藏对话框
                this.getCateList()
                this.addCateDialogVisible = false
            })
        },
        // 监听对话框的关闭事件，重置表单数据
        addCateDialogClosed(){
            this.$refs.addCateFormRef.resetFields()
            this.selectedKeys = []
            // 重置父级分类
            this.addCateForm.cat_pid = 0
            this.addCateForm.cat_level = 0
        }

这里我就简单测试一下最后实现效果，首先我们添加一个一级分类test1，然后再添加一个test2 他的父级是test1 最后，看一下效果：
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

最后结果与实际想要的结果达成一致，开发完成~
在这里插入图片描述

3、结束语

至此，我们的功能就完成了！

Vue全家桶开发电商管理系统码云地址，欢迎一起来学习~

https://gitee.com/Chocolate666/vue_shop

最后，看完本篇博客后，觉得挺有帮助的话，可以继续查看专栏其它内容嗷，一起来学习Vue吧~
在这里插入图片描述

点击进入Vue❤学习专栏~

学如逆水行舟，不进则退
一百个Chocolate
发布了387 篇原创文章 · 获赞 598 · 访问量 9万+
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_42429718/article/details/104045709
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022