文章目录
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