一，布局商品分类组件和页面
就是使用之前的代码修改一下，效果如下：
二，获取商品分类数据列表
在 应该在页面的组件创建时就获取到，因为获取到的数据需要用来渲染页面的。所以需要利用vue的生命周期函数：
<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(res.meta.msg)
this.cateList=res.data.result
this.total=res.data.total
}
}
}
</script>
三，
第一步，安装依赖：
接下来就可以使用名为tree-table的组件了：
<!-- 表格区域 -->
<zk-table
:data="cateList"
:columns="columns"
:selection-type="false"
:expand-type="false"
show-index
index-text="#"
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>
</zk-table>
对应的数据：
data(){
return{
//查询条件
queryInfo:{
type:3,
pagenum:1,
pagesize:5
},
// 查询到的商品分类
cateList:[],
// 总数据条数
total:0,
// 为 tree-table指定列定义
columns: [
//第一列数据
{
label: '分类名称',
prop: 'cat_name',
},
//第二列数据
{
label:'是否有效',
//表示将当前列定义为模板列
type:'template',
//表示当前这一列使用模板名称
template:'isOk'
}
],
}
},
三，创建新的列-排序
<template>
<div>
<!-- 面包屑导航区 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/welcome' }">首页</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="">添加角色</el-button>
</el-col>
</el-row>
<!-- 表格区域 -->
<zk-table
:data="cateList"
:columns="columns"
:selection-type="false"
:expand-type="false"
show-index
index-text="#"
border
:show-row-hover="false"
class="treetable"
>
<!-- 是否有效列 -->
<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>
<!-- 排序列 -->
<template slot="order" slot-scope="scope">
<el-tag v-if="scope.row.cat_level===0" size="mini">一级</el-tag>
<el-tag type="success" v-else-if="scope.row.cat_level===1" size="mini">二级</el-tag>
<el-tag type="danger" v-else="scope.row.cat_level===2" size="mini">三级</el-tag>
</template>
<!-- 操作列 -->
<template slot="opt" slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
<el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
</template>
</zk-table>
<!-- 分页区域 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[3, 6, 10,15]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</el-card>
</div>
</template>
<script>
export default{
data(){
return{
//查询条件
queryInfo:{
type:3,
pagenum:1,
pagesize:6
},
// 查询到的商品分类
cateList:[],
// 总数据条数
total:0,
// 为 tree-table指定列定义
columns: [
//第一列数据
{
label: '分类名称',
prop: 'cat_name',
},
//第二列数据
{
label:'是否有效',
//表示将当前列定义为模板列
type:'template',
//表示当前这一列使用模板名称
template:'isOk',
width:'75px'
},
//第三列数据
{
label:'排序',
//表示将当前列定义为模板列
type:'template',
//表示当前这一列使用模板名称
template:'order'
},
//第四列数据
{
label:'操作',
//表示将当前列定义为模板列
type:'template',
//表示当前这一列使用模板名称
template:'opt'
},
],
}
},
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(res.meta.msg)
this.cateList=res.data.result
this.total=res.data.total
},
//监听页面改变
handleSizeChange(pageSize){
this.queryInfo.pagesize=pageSize
this.getCateList()
},
//监听pagenum的改变
handleCurrentChange(pagenum){
this.queryInfo.pagenum=pagenum
this.getCateList()
}
}
}
</script>
<style lang="less" scoped>
.treetable{
margin-top: 15px;
}
</style>
实现的效果：
三，点击添加分类弹出对话框
接口文档：
四，商品分类的二级级联选择框的实现
第一步：首先要获取商品分类的数据列表。
接口文档如下：
因为只有三级，所以这里只需要获取两级就可以了，而且需要获取所有分类，所以剩余两个参数是空。
于是请求如下：
//添加新分类按钮,弹出添加新分类对话框
async addCateBtn(){
this.getParentCateList()
this.addcatdialogVisible=true
},
//获取父级分类的数据列表
async getParentCateList(){
const{data:res}=await this.$http.get('categories',{
params:{
type:2
}
})
if(res.meta.status!==200)return this.$message.error(res.meta.msg)
this.parentCateList=res.data
}
第二步：使用element-ui提供的级联选择器Cascader
//监听页面改变
handleSizeChange(pageSize){
this.queryInfo.pagesize=pageSize
this.getCateList()
},
//监听pagenum的改变
handleCurrentChange(pagenum){
this.queryInfo.pagenum=pagenum
this.getCateList()
},
//关闭添加新分类对话框时触发
addcatDialogClosed(){
this.$refs.addCatFormRef.resetFields()
this.selectedKeys=[]
this.addcatForm.cat_pid=0
this.addcatForm.cat_level=0
},
//添加新分类按钮,弹出添加新分类对话框
async addCateBtn(){
this.getParentCateList()
this.addcatdialogVisible=true
},
//获取父级分类的数据列表
async getParentCateList(){
const{data:res}=await this.$http.get('categories',{
params:{
type:2
}
})
if(res.meta.status!==200)return this.$message.error(res.meta.msg)
this.parentCateList=res.data
},
//级联选择项发生变化则触发
handleChange(){
// console.log(this.selectedKeys)
//如果selectedKeys数组中的length大于0,证明选中了父级分类
//反之,则说明没有选中任何父级分类
if(this.selectedKeys.length>0){
//取出当前选中的最末尾一级的id,作为当前的值的父级id,为后续发起请求更改数据库参数做铺垫
this.addcatForm.cat_pid=this.selectedKeys[this.selectedKeys.length-1]
//接着为当前的分类等级赋值,同样是为了后续发起请求更改数据库参数做铺垫
this.addcatForm.cat_level=this.selectedKeys.length
}else{
//父级分类的id
this.addcatForm.cat_pid=0
this.addcatForm.cat_level=0
}
},
//添加新的分类进数据库
addcate(){
//先对表单进行预验证
this.$refs.addCatFormRef.validate(async valid=>{
if(!valid)return
const{data:res}=await this.$http.post('categories',this.addcatForm)
if(res.meta.status!==201)return this.$message.error(res.meta.msg)
this.$message.success(res.meta.msg)
this.getCateList()
this.addcatdialogVisible= false
})
},
对应的级联选择器：
<!-- options用来指定数据源 -->
<!-- props用来指定配置对象 -->
<!-- v-model必须绑定一个数组(已经选中的id) -->
<el-cascader v-model="selectedKeys" :options="parentCateList"
:props="cascaderProps" @change="handleChange" class="el-cascader-panel" clearable
></el-cascader>
五，编辑功能的实现
要做到这样子：
和之前的做法是一样的，这里已经使用了作用域插槽，这样就可以在点击编辑时，调用函数，查出对应的本行的分类名称，填充到表单中：
//点击编辑按钮
editCate(cate){
//打开对话框
this.editCateDialogVisible= true
//将本分类得到的数据保存
this.editCateList=cate
},
绑定数据，渲染到页面：
<!-- 修改角色对话框 -->
<el-dialog
title="修改分类信息"
:visible.sync="editCateDialogVisible"
width="50%"
>
<!-- 内容主体区域，这里有一个匿名插槽 -->
<el-form :model="editCateList" :rules="addCatFormRules" ref="editCateListRef" label-width="100px">
<el-form-item label="分类名称" prop="cat_name">
<el-input v-model="editCateList.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="editCateInfo">修改</el-button>
</span>
</el-dialog>
紧接着，发起请求，修改分类名称：
接口文档：
editCateInfo(){
//先进行验证
this.$refs.editCateListRef.validate(async valid=>{
if(!valid)return
//验证通过发起请求
const{data:res}=await this.$http.put(`categories/${this.editCateList.cat_id}`,{cat_name:this.editCateList.cat_name})
if(res.meta.status!==200)return this.$message.error(res.meta.msg)
this.$message.success(res.meta.msg)
this.getCateList()
this.editCateDialogVisible= false
})
}
六，删除分类功能的实现
//删除数据
async removeCayeById(id){
//弹窗询问是否删除数据
const confirmResult=await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).catch(err=>err)
//如果用户确认删除，则返回字符串confirm
//如果用户确认取消，则返回字符串cancel
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(res.meta.msg)
this.$message.success(res.meta.msg)
this.getCateList()
this.editCateDialogVisible= false
}
8283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
