寒假是用来反超的!
一起来学习Vue把,这篇博客是关于商品分类,请多指教~
<template>
<div>
<!--面包屑导航区-->
<el-breadcrumb separator="/">
<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>
// 获取商品分类数据
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)
// 把数据赋值给cateList
this.cateList = res.data.result
// 为总数据条数赋值
this.total = res.data.total
}
需要安装新的依赖 进入我们的vue ui 然后选择运行依赖 输入vue-table-with-tree-grid
npm i vue-table-with-tree-grid -S
或者使用yarn指令
yarn add vue-table-with-tree-grid
然后再main.js中导入全局组件,为我们后续使用
<!-- 表格 -->
<tree-table :data="cateList" :columns="columns"
:selection-type=false :expand-type=false show-index index-text="#" border :show-row-hover=false
></tree-table>
<!-- 表格 -->
<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 class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color: #1E90FF;"></i>
<i class="el-icon-error" v-else style="color: red;"></i>
</template>
</tree-table>
<template>
<div>
<!--面包屑导航区-->
<el-breadcrumb separator="/">
<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>
<!-- 表格 -->
<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 class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color: #1E90FF;"></i>
<i class="el-icon-error" v-else style="color: red;"></i>
</template>
<!-- 排序列 -->
<template slot="order" 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" scope="">
<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-card>
</div>
</template>
<!-- -->
<template>
<div>
<!--面包屑导航区-->
<el-breadcrumb separator="/">
<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>
<!-- 表格 -->
<tree-table class="treeTable" :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 class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color: #1E90FF;"></i>
<i class="el-icon-error" v-else style="color: red;"></i>
</template>
<!-- 排序列 -->
<template slot="order" 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" scope="">
<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>
</el-card>
</div>
</template>
<!-- 添加分类的对话框 -->
<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>
// 点击添加分类按钮 显示对话框
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('获取父级分类列表失败')
console.log(res.data)
this.ParentCateList = res.data
}
<!-- 添加分类的表单 -->
<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
clearable
expandTrigger="hover"
v-model="selectedKeys"
:options="ParentCateList"
:props="cascaderProps"
@change="parentCateChanged"></el-cascader>
</el-form-item>
</el-form>
// 父级分类数据列表
ParentCateList: [],
// 指定级联选择器的配置对象
cascaderProps: {
value: 'cat_id',
label: 'cat_name',
children: 'children',
checkStrictly :true,
expandTrigger: 'hover'
},
// 选中的父级分类的id数组
selectedKeys: []
// 监听选择项发生变化事件
parentCateChanged(){
// 如果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
console.log(this.addCateForm.cat_pid)
return
}else{
// 如果等于0
this.addCateForm.cat_pid = 0
this.addCateForm.cat_level = 0
}
},
// 点击确定按钮,添加新的分类
addCate(){
console.log(this.addCateForm)
}
// 监听对话框的关闭事件,重置表单数据
addCateDialogClosed(){
this.$refs.addCateFormRef.resetFields()
this.selectedKeys = []
// 重置父级分类
this.addCateForm.cat_pid = 0
this.addCateForm.cat_level = 0
}
// 点击确定按钮,添加新的分类
addCate(){
// console.log(this.addCateForm)
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_pid = 0
this.addCateForm.cat_level = 0
}
这里我就简单测试一下最后实现效果,首先我们添加一个一级分类test1,然后再添加一个test2 他的父级是test1 最后,看一下效果:
至此,我们的功能就完成了!
Vue全家桶开发电商管理系统码云地址,欢迎一起来学习~
https://gitee.com/Chocolate666/vue_shop
最后,看完本篇博客后,觉得挺有帮助的话,可以继续查看专栏其它内容嗷,一起来学习Vue吧~
学如逆水行舟,不进则退