目录
商品分类
商品分类
功能：
使用表榕树组件
官网： https://www.npmjs.com/package/vue-table-with-tree-grid下载 ：npm i vue-table-with-tree-grid -Smain.js中引入：import TreeTable from 'vue-table-with-tree-grid'main.js中注册为全局组件 Vue.component('tree-table', TreeTable)tree-table 组件的使用
data ：表格各行的数据columns ： 表格各列的配置 详情见官网
这需要自己定义一下需要显示的列 数据 show-index ： 显示索引列index-text ： 显示索引列的名称 一般为 1 开始 —show-row-hover ： 鼠标悬停时，是否高亮当前行selection-type ： 是否为多选类型表格 一般为否border ：是否显示纵向边框 获取表榕树的数据 getCateList 然后赋值给 cateList 一般还需要拿到数据的总数，为了分页使用
查询条件 queryInfo: { type: 3, pagenum: 1, pagesize: 5 }, type为3代表的是 包含3个级别表榕树数据 匹配对应的属性，渲染数据，需要使用 template 去包裹，想要显示的组件等数据 (比如：是否有效 排序等) 添加分类
点击添加分类的时候先获取商品分类的数据(也称之为父级分类数据)再显示 添加分类的对话框 showAddCateDialog定义一个添加分类的对象 addCateForm: { cat_name: '', cat_pid: 0,cat_level: 0 },
将要添加分类名称 分类父级id 分类等级：0表示一级分类；1表示二级分类；2表示三级分类 父级联列表 为了是在添加分类的对话框中 渲染的
父级联列表 中 change 事件 就是当级联选项发生变化的时候 根据选中的数据长度 给级联添加父级联 和 当前分类的等级 若是没有选中，直接是一级的级联！ 添加分类中对话框的 确定按钮 点击确定后 添加分类，需要向后台写入当前添加分类的这个对象然后调用获取 分类列表的方法 获取最新的数据最后隐藏对话框点击关闭的时候，对表单的重置，还有对选中的数据清空，对级联的当前id 和 当前等级 清空
<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" @click="showAddCateDialog">添加分类</el-button>
</el-col>
</el-row>
<!-- 表格 -->
<tree-table
class="treeTable"
:data="cateList"
:columns="columns"
:selection-type="false"
:expand-type="false"
index-text="#"
:show-row-hover="false"
show-index
border
>
<!-- 是否有效 -->
<template slot="isOk" slot-scope="scope">
<i
class="el-icon-success"
style="color: lightgreen"
v-if="scope.row.cat_deleted === false"
></i>
</template>
<!-- 排序 -->
<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>
<!-- 操作 -->
<template slot="opt" slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditCateDialog(scope.row.cat_id)">编辑</el-button>
<el-button type="danger" icon="el-icon-delete" size="mini" @click="removeCate(scope.row.cat_id)">删除</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>
</el-card>
<!-- 添加分类的对话框 -->
<el-dialog title="添加分类" :visible.sync="addCateDialogVisible" width="50%" @close="addCateDialogClosed">
<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="父级分类：">
<!-- options：数据源 -->
<!-- props：指定配置对象 -->
<el-cascader
v-model="selectedKeys"
:options="parentCateList"
:props="cascaderProps"
@change="parentCateChanged"
clearable
filterable
style="width: 100%"
></el-cascader>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="addCateDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addCate">确 定</el-button>
</span>
</el-dialog>
<!-- 编辑分类的对话框 -->
<el-dialog title="编辑分类" :visible.sync="editCateDialogVisible" width="50%">
<el-form
:model="editCateForm"
:rules="editCateFormRules"
ref="editCateFormRef"
label-width="100px"
>
<el-form-item label="分类名称：" prop="cat_name">
<el-input v-model="editCateForm.cat_name"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="editCateDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="eidtCate">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data () {
return {
// 商品分类数据
cateList: [],
// 查询条件
queryInfo: {
type: 3,
pagenum: 1,
pagesize: 5
},
total: 0,
// 为table指定列的定义
columns: [
{
label: '分类名称',
prop: 'cat_name'
},
{
label: '是否有效',
// 当前列 自定义模板
type: 'template',
template: 'isOk'
},
{
label: '排序',
// 当前列 自定义模板
type: 'template',
template: 'order'
},
{
label: '操作',
// 当前列 自定义模板
type: 'template',
template: 'opt'
}
],
// 添加分类
addCateDialogVisible: false,
// 添加分类对象
addCateForm: {
// 将要添加分类名称
cat_name: '',
// 分类父级id
cat_pid: 0,
// 分类等级：`0`表示一级分类；`1`表示二级分类；`2`表示三级分类
cat_level: 0
},
// 添加分类表单的验证规则
addCateFormRules: {
cat_name: [
{ required: true, message: '请输入分类名称', trigger: 'blur' }
]
},
// 父级分类列表
parentCateList: [],
// 指定级联选择器的配置对象
cascaderProps: {
// 配置触发选项 hover/click
expandTrigger: 'hover',
value: 'cat_id',
label: 'cat_name',
children: 'children'
},
// 选中的父级Id数组
selectedKeys: [],
// 编辑对话框 控制
editCateDialogVisible: false,
// 编辑分类表单验证
editCateFormRules: {
cat_name: [
{ required: true, message: '请输入分类名称', trigger: 'blur' }
]
},
// 编辑表单 绑定对象
editCateForm: ''
}
},
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('获取商品分类失败！')
}
// 给数据列表赋值
this.cateList = res.data.result
// 总数据条数
this.total = res.data.total
},
// 监听 pageSizeChange
handleSizeChange (newSize) {
this.queryInfo.pagesize = newSize
this.getCateList()
},
// 监听 pagenum改变
handleCurrentChange (newPage) {
this.queryInfo.pagenum = newPage
this.getCateList()
},
// 添加操作
showAddCateDialog () {
// 先获取父级分类数据
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
},
// 添加分类 选择项发生变化触发
parentCateChanged () {
// 如何selectKeys 数组的长度>0 说明选中父级分类
if (this.selectedKeys.length > 0) {
// 父级分类的Id
this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1]
// 当前分类的等级
this.addCateForm.cat_level = this.selectedKeys.length
return 0
} else {
// 父级分类的Id
this.addCateForm.cat_pid = 0
// 当前分类的等级
this.addCateForm.cat_level = 0
}
},
// 添加分类
addCate () {
this.$refs.addCateFormRef.validate(async valid => {
if (!valid) return
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
})
},
// 添加分类 重置表单
addCateDialogClosed () {
this.$refs.addCateFormRef.resetFields()
this.selectedKeys = []
this.addCateForm.cat_level = 0
this.addCateForm.cat_pid = 0
},
// 删除分类
async removeCate (id) {
const confirmResult = await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).catch(err => err)
if (confirmResult !== 'confirm') { return this.$message.info('已取消删除！') }
const { data: res } = await this.$http.delete('categories/' + id)
if (res.meta.status !== 200) { return this.$message.error('删除商品分类失败！') }
this.$message.success('删除商品分类成功！')
this.getCateList()
},
// 显示编辑对话框
async showEditCateDialog (id) {
const { data: res } = await this.$http.get('categories/' + id)
if (res.meta.status !== 200) return this.$message.error('获取分类失败！')
this.editCateForm = res.data
this.editCateDialogVisible = true
},
// 编辑分类名
eidtCate () {
this.$refs.editCateFormRef.validate(async valid => {
if (!valid) return
const { data: res } = await this.$http.put('categories/' + this.editCateForm.cat_id,
{
cat_name: this.editCateForm.cat_name
})
if (res.meta.status !== 200) return this.$message.error('更新分类名失败！')
this.$message.success('更新分类名成功！')
this.getCateList()
this.editCateDialogVisible = false
})
}
}
}
</script>
<style lang='less' scoped>
.treeTable {
margin-top: 20px;
}
// .el-cascader {
// width: 100%;
// }
</style>
