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

最新推荐文章于 2022-10-31 19:17:30 发布

一百个Chocolate

最新推荐文章于 2022-10-31 19:17:30 发布

阅读量4.5k

点赞数 10

分类专栏： Vue全家桶系列文章标签： vue javascript js react java

原则上允许部分内容转载，转载请注明原文章地址！

本文链接：https://blog.csdn.net/weixin_42429718/article/details/104045709

版权

文章目录

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;">