前端学习之vue+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