1、创建商品分类分支goods_cate并push到远程
查看分支：
git branch
创建分支：
git checkout -b goods_cate
推送到远程：（以前码云中没有该分支，所以要加-u，如果码云中有该分支，则不需要加-u）
git push -u origin goods_cate
2、通过路由加载商品分类组件
新建goods文件夹和Cate.vue文件：
复制代码
<template>
<div>
<h3>商品分类组件</h3>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
</style>
复制代码
添加路由：
复制代码
import Cate from '../components/goods/Cate.vue'
const routes = [
{ path: '/', redirect: '/login' }, // 重定向
{ path: '/login', component: Login },
{
path: '/home',
component: Home,
redirect: '/welcome', // 重定向
children: [ // 子路由
{ path: '/welcome', component: Welcome },
{ path: '/users', component: Users }, // 用户列表
{ path: '/rights', component: Rights }, // 权限列表
{ path: '/roles', component: Roles }, // 角色列表
{ path: '/categories', component: Cate } // 商品分类
]
}
]
复制代码
点击左侧菜单的商品分类的效果如图：
3、绘制商品分类组件的基本布局
还是面包屑和card视图：
复制代码
<template>
<div>
<!--面包屑导航区域-->
<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>
<!--卡片视图区域-->
<el-card>
<!--添加角色按钮区域-->
<el-row>
<el-col>
<el-button type="primary">添加分类</el-button>
</el-col>
</el-row>
<!--分类列表区域-->
<!--分页区域-->
</el-card>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
</style>
复制代码
4、调用api接口获取商品分类列表数据
商品分类数据列表，请求路径：categories，请求方法：get，
请求参数
type [1,2,3] 值：1，2，3 分别表示显示一层二层三层分类列表 【可选参数】如果不传递，则默认获取所有级别的分类
pagenum 当前页码值 【可选参数】如果不传递，则默认获取所有分类
pagesize 每页显示多少条数据 【可选参数】如果不传递，则默认获取所有分类
复制代码
<script>
export default {
data() {
return {
// 查询条件
queryInfo: {
type: 3,
pagenum: 1,
pagesize: 5
},
cateList: [], // 商品分类列表数据
total: 0 // 总数据条数
}
},
created() {
this.getCateList()
},
methods: {
// 获取商品分类数据
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.data)
this.cateList = res.data.result
// 带参数请求，返回的数据多一层result，还有总数total，当前页pagenum，当然页条数pagesize
this.total = res.data.total
}
}
}
</script>
复制代码
注意：这里请求接口时记得带参数，否则会返回一个总数据的data，而没有total、pagenum，pagesize参数。
5、使用vue-table-with-tree-grid树形表格组件
element没有相应的组件，要通过第三方插件来实现
打开vue ui面板，找到依赖项，点击安装依赖，在弹出的对话框中，搜索：vue-table-with-tree-grid，进行安装。
然后查看文档，有两种用法：
复制代码
import Vue from 'vue'
import ZkTable from 'vue-table-with-tree-grid'
Vue.use(ZkTable)
// 或者
import Vue from 'vue'
import ZkTable from 'vue-table-with-tree-grid'
Vue.component(ZkTable.name, ZkTable)
复制代码
打开入口文件main.js，导入插件：
import TreeTable from 'vue-table-with-tree-grid'
Vue.component('tree-table', TreeTable)
参考官方文档给的示例代码，重新回到Cate.vue文件，使用插件：
<!--分类列表区域-->
<tree-table :data="cateList" :columns="columns" :selection-type="false" :expand-type="false"
show-index index-text="#" border :show-row-hover="false"></tree-table>
data 表格各行的数据
columns 表格各列的配置（具体见下文：Columns Configs）
selection-type 是否为多选类型表格
expand-type 是否为展开行类型表格（为 True 时，需要添加名称为 '$expand' 的作用域插槽, 它可以获取到 row, rowIndex)
show-index 是否显示数据索引
index-text 数据索引名称
border 是否显示纵向边框
show-row-hover 鼠标悬停时，是否高亮当前行
定义columns：
复制代码
// 为table表格各列的配置定义
columns: [
{
label: '分类名称', // 列标题名称
prop: 'cat_name' // 对应列内容的属性名
},
{
label: '是否有效'
},
{
label: '排序'
},
{
label: '操作'
}
]
复制代码
此时效果图：
6、使用自定义模板渲染表格数据
先自定义是否有效模板：
复制代码
// 为table表格各列的配置定义
columns: [
{
label: '分类名称', // 列标题名称
prop: 'cat_name' // 对应列内容的属性名
},
{
label: '是否有效',
type: 'template', // 表示：把当前列定义为模板列
template: 'isok' // 表示当前这列使用的模板名称
},
{
label: '排序'
},
{
label: '操作'
}
]
复制代码
添加到表格：
复制代码
<!--分类列表区域-->
<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 v-if="!scope.row.cat_deleted" class="el-icon-success"></i>
<i v-else class="el-icon-error"></i>
</template>
</tree-table>
<style lang="less" scoped>
.el-icon-success{color: lightgreen;}
.el-icon-error{color:red;}
</style>
复制代码
此时效果图：
7、 渲染排序和操作对应的UI
columns：
复制代码
// 为table表格各列的配置定义
columns: [
{
label: '分类名称', // 列标题名称
prop: 'cat_name' // 对应列内容的属性名
},
{
label: '是否有效',
type: 'template', // 表示：把当前列定义为模板列
template: 'isok' // 表示当前这列使用的模板名称
},
{
label: '排序',
type: 'template', // 表示：把当前列定义为模板列
template: 'order' // 表示当前这列使用的模板名称
},
{
label: '操作',
type: 'template', // 表示：把当前列定义为模板列
template: 'operate' // 表示当前这列使用的模板名称
}
]
