前端学习之vue+element-ui电商项目（七）商品分类

原创

已于 2022-03-25 16:21:03 修改 · 2.5k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #学习

于 2022-03-25 16:02:19 首次发布

本文档详细介绍了如何使用Vue.js和Element-UI组件库来开发一个电商项目的商品分类功能。从界面布局、导航视图、卡片视图的样式，到添加分类按钮、表格展示、排序、操作及分页区的设计，再到数据添加和各种方法的实现，最后展示完整的功能流程。通过此教程，读者可以掌握前端开发中商品分类模块的构建技巧。

0. 准备工作

component下新建文件夹goods下新建文件Cate.vue，并在路由中引入文件

1.界面样式

1.1 界面布局

在这里插入图片描述

1.1 导航视图

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

2.卡片视图

2.1 界面样式

2.1.1 添加分类按钮

<el-row>
              <el-col>
                  <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
              </el-col>
          </el-row>

2.1.2 分类表格界面布局

在这里插入图片描述

2.1.3 是否有效

<template slot="isOk" slot-scope="scope">
                 <i class="el-icon-success"
                 v-if="scope.row.cat_deleted===false"
                 style="color: lightgreen"></i>
                 <i class="el-icon-error" v-else style="color: red"></i>
             </template>

2.1.4 排序

<template slot="order" slot-scope="scope">
                <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
                <el-tag
                    type="success"
                    size="mini"
                    v-else-if="scope.row.cat_level === 1"
                    >二级</el-tag
                >
                <el-tag type="warning" size="mini" v-else>三级</el-tag>
            </template>

2.1.5 操作

<template slot="opt" slot-scope="scope">
            <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="showEditDialog(scope.row.cat_id)"
            >编辑</el-button>

            <el-button
            type=