一、创建goods_cate分支
-
- git checkout -b goods_cat
-
- git branch
-
- git push -u origin goods_cate(因为此前云端还没有goods_cate分支,所以必须使用git push -u origin 分支名称 的方式提交分支,如果此前已有该分支,则只需要git push即可)
-
- 可以在云端中查看到该分支了
二、通过路由加载商品分类组件
1.在components下创建goods/Cate.vue
<template>
<div>
<h1>cate组件</h1>
</div>
</template>
<script>
export default {
data: () => ({})
}
</script>
<style lang="less" scoped>
</style>
2.配置路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
import Home from '../components/Home.vue'
import Welcome from '../components/Welcome.vue'
import Users from '../components/users/Users.vue'
import Rights from '../components/power/Rights.vue'
import Roles from '../components/power/Roles.vue'
import Cate from '../components/goods/Cate.vue'
Vue.use(VueRouter)
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
}
]
}
]
const router = new VueRouter({
routes
})
// to 将要访问的路径
// from 代表从哪个路径跳转而来
// next 是一个函数 表示放行
// next() 放行 next('/login') 强制跳转
router.beforeEach((to, from, next) => {
// 如果将要访问的路径是login,就放行
if (to.path === '/login') return next()
// 获取token
const token = window.sessionStorage.getItem('token')
// 如果token不存在,则强制跳转到登录页面
if (!token) return next('/login')
// 如果token存在,则放行
next()
})
export default router
三、绘制商品分类组件的基本页面布局
<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 {
data: () => ({})
}
</script>
<style lang="less" scoped>
</style>
四、调用API获取商品分类列表数据
1.在页面加载时就获取数据列表(created中调用getCateList函数)
created() {
this.getCateList()
},
2.在methods中定义getCateList函数,并获取数据列表
methods: {
async getCateList() {
const { data: res } = await this.$http.get('categories', { params: this.queryInfo })
if (res.meta.status !== 200) {
return this.$message.error('获取商品分类列表失败!')
}
// 把数据列表 赋值给catelist
this.catelist = res.data.result
// 为总数据条数赋值
this.total = res.data.total
}
}
3.在data中定义需要用到的数据
data: () => ({
// 获取商品分类列表的查询条件
queryInfo: {
type: 3,
pagenum: 1,
pagesize: 5
},
// 商品分类数据列表
catelist: [],
// 总数据条数
total: 0
}),
五、初步使用vue-table-with-tree-grid树形表格组件
1. 安装vue-table-with-tree-grid依赖
2. 根据官方文档进行配置(在main.js中)
1.导入组件
import treeTable from 'vue-table-with-tree-grid'
2.注册为全局可用组件
// 注册为全局可用组件
Vue.component('tree-table', treeTable)
3.在cate.vue中使用该组件
<!-- 表格区域 -->
<tree-table
show-index
index-text="#"
:data="catelist"
:columns="columns"
:selection-type="false"
:expand-type="false"
border
:show-row-hover="false"
></tree-table>
data中:
// 为table指定列的定义
columns: [
{
label: '分类名称',
prop: 'cat_name'
}
]
六、使用自定义模板渲染表格数据(第二列数据)
<!-- 表格区域 -->
<tree-table
show-index
index-text="#"
:data="catelist"
:columns="columns"
:selection-type="false"
:expand-type="false"
border
:show-row-hover="false"
>
<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
></tree-table>
// 为table指定列的定义
columns: [
{
label: '分类名称',
prop: 'cat_name'
},
{
label: '是否有效',
// 表示 将当前列定义为模板列
type: 'template',
template: 'isok'
}
]
七、渲染排序和操作对应的UI结构
1.排序列
- 增加模板
{
label: '排序',
// 表示 将当前列定义为模板列
type: 'template',
// 表示当前这一列使用模板的名称
template: 'order'
}
- 2.使用模板
<!-- 排序 -->
<template slot="order" slot-scope="scope">
<el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
<el-tag size="mini" type="success" v-else-if="scope.row.cat_level === 1">二级</el-tag>
<el-tag size="mini" type="warning" v-else>三级</el-tag>
</template>
2.操作列
{
label: '操作',
// 表示 将当前列定义为模板列
type: 'template',
// 表示当前这一列使用模板的名称
template: 'opt'
}
<!-- 操作 -->
<template slot="opt">
<el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
</template>
</tree-table>
八、实现分页功能
<!-- 分页区域 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[3, 5, 10, 15]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
// 监听pagesize变化
handleSizeChange(newszie) {
this.queryInfo.pagesize = newszie
this.getCateList()
},
// 监听pagenum变化
handleCurrentChange(newnum) {
this.queryInfo.pagenum = newnum
this.getCateList()
}
九、渲染添加分类的对话框和表单
<!-- 添加分类对话框 -->
<el-dialog
title="添加分类"
:visible.sync="addcatedialogVisible"
width="50%"
>
<!-- 添加分类的表单 -->
<el-form
:model="addCateForm"
:rules="addCateFormRules"
ref="addCateFormRef"
label-width="100px"
>
<el-form-item label="分类名称" prop="cat_name">
<el-input v-model="addCateForm.cat_name"></el-input>
</el-form-item>
<el-form-item label="父级分类">
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="addcatedialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addcatedialogVisible = false"
>确 定</el-button
>
</span>
</el-dialog>
- 父级分类可为空,且为空时表示要将上面的分类名称设置为一级 data中:
// 添加分类对话框的显示隐藏
addcatedialogVisible: false,
// 添加分类的表单数据对象
addCateForm: {
// 将要添加的分类的名称
cat_name: '',
// 父级分类的id
cat_pid: 0,
// 分类的等级,默认要添加的是1级分类
cat_level: 0
},
// 添加分类的表单的验证规则
addCateFormRules: {
cat_name: [
{ required: true, message: '请输入分类名称', trigger: 'blur' }
]
}
十、获取父级分类数据列表
// 点击按钮,展示添加分类的对话框
showAddCateDialog() {
// 点击添加分类按钮后触发getParentCateList函数
this.getParentCateList()
this.addcatedialogVisible = true
},
// 获取父级分类的数据列表
async getParentCateList() {
const { data: res } = await this.$http.get('categories', { params: { type: 2 } })
if (res.meta.status !== 200) {
return this.$message.error('获取父级分类数据失败!')
}
this.parentCateList = res.data
console.log(this.parentCateList)
}
十一、渲染级联选择器
// clearable清空
// change-on-select可以选中一级数据名称
<el-form-item label="父级分类">
<!-- options:用来指定数据源 -->
<!-- props:用来指定配置对象 -->
<el-cascader
expand-trigger="hover"
v-model="selectedkeys"
:options="parentCateList"
:props="cascaderProp"
@change="parentCateChange"
clearable
change-on-select
></el-cascader>
</el-form-item>
data:
// 指定级联选择器的配置对象
cascaderProp: {
value: 'cat_id',
label: 'cat_name', // 显示到输入框里的数据
children: 'children' // 与下一级数据相关联
},
// 选中的父级分类的id数组
selectedkeys: []
methods:
// 选择项发生变化触发这个函数
parentCateChange() {
console.log(this.selectedkeys)
}
十二、根据父分类的变化处理表单中的数据
1.选择项发生变化触发parentCateChange函数,点击确定按钮触发addCate函数
<el-button type="primary" @click="addCate">确 定</el-button>
2.实现函数
// 选择项发生变化触发这个函数
parentCateChange() {
// console.log(this.selectedkeys)
// 如果selectedkeys数组中的length大于0,证明选中了父级分类
// 反之,就说明没有选中任何父级分类
if (this.selectedkeys.length > 0) {
// 父级分类的id
this.addCateForm.cat_pid = this.selectedkeys[this.selectedkeys.length - 1]
// 为当前分类的等级赋值
this.addCateForm.cat_level = this.selectedkeys.length
} else {
// 父级分类的id
this.addCateForm.cat_pid = 0
// 为当前分类的等级赋值
this.addCateForm.cat_level = 0
}
},
// 点击确定,添加新的分类
addCate() {
console.log(this.addCateForm)
}
十三、在对话框的close事件中重置表单数据
1.给对话框添加关闭事件
<!-- 添加分类对话框 -->
<el-dialog
title="添加分类"
:visible.sync="addcatedialogVisible"
width="50%"
@close="addCateDialogClose"
>
2.监听关闭事件
// 监听对话框的关闭事件,重置表单数据
addCateDialogClose() {
this.$refs.addCateFormRef.resetFields()
this.addCateForm.cat_level = 0
this.addCateForm.cat_pid = 0
this.selectedkeys = []
}
十四、完成添加分类的操作
// 点击确定,添加新的分类
addCate() {
// 预校验
this.$refs.addCateFormRef.validate(async valid => {
if (!valid) return this.$message.error('预校验失败')
const { data: res } = await this.$http.post('categories', this.addCateForm)
if (res.meta.status !== 201) {
return this.$message.error('添加分类失败')
}
this.$message.success('添加分类成功')
this.getCateList()
this.addcatedialogVisible = false
})
},