社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
商品分类用于在购物时,快速找到所要购买的商品,可以通过电商平台主页直观的看到
git checkout -b goods_cate
git push -u origin goods_cate
创建组件 components/goods/Cate.vue并通过路由组件挂载到页面中
<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>
data() {
return {
// 查询条件
querInfo: {
type: 3,
pagenum: 1,
pagesize: 5
},
// 商品分类的数据列表
cateList: [],
// 总数据条数
total: 0
}
},
created() {
this.getCateList()
},
methods: {
// 获取商品分类数据
async getCateList() {
const { data: result } = await this.$http.get('categories', {params: this.querInfo})
if (result.meta.status !== 200) {
return this.$message.error('获取商品分类失败!')
}
// 把数据列表赋值给cateList
this.cateList = result.data.result
// 为总数据条数赋值
this.total = result.data.total
}
}
import TreeTable from 'vue-table-with-tree-grid'
Vue.component('tree-table', TreeTable)
<!-- 分类表格
:data(设置数据源) :columns(设置表格中列配置信息) :selection-type(是否有复选框)
:expand-type(是否展开数据) show-index(是否设置索引列) index-text(设置索引列头)
border(是否添加纵向边框) :show-row-hover(是否鼠标悬停高亮) -->
<tree-table :data="cateList" :columns="columns" :selection-type="false"
:expand-type="false" show-index index-text="#" border :show-row-hover="false" class="treetable">
</tree-table>
// 在数据中添加columns:
columns: [
{label:'分类名称',prop:'cat_name'}
]
.treetable{
margin-top: 15px;
}
<tree-table>
<!-- 是否有效 -->
<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>
columns: [
{
label: '是否有效',
// 表示将当前列定义为模板列
type: 'template',
// 表示当前这一列使用模板名称
template: 'isok'
}
]
<tree-table>
<!-- 排序 -->
<template slot="order" 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="opt">
<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>
</tree-table>
columns: [
{
label: '排序',
// 表示将当前列定义为模板列
type: 'template',
// 表示当前这一列使用模板名称
template: 'order'
},
{
label: '操作',
// 表示将当前列定义为模板列
type: 'template',
// 表示当前这一列使用模板名称
template: 'opt'
}
]
<!-- 分页区域 -->
<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(newSize) {
this.queryInfo.pagesize = newSize
// 刷新数据
this.getCateList()
},
// 监听pagenum改变的事件
handleCurrentChange(newPage) {
this.queryInfo.pagenum = newPage
this.getCateList()
}
<el-button type="primary" @click="showAddCatDialog">添加分类</el-button>
<!-- 添加分类对话框 -->
<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>
// 控制添加分类对话框的显示与隐藏
addCateDialogVisible: false,
// 添加分类的表单数据对象
addCateForm: {
// 将要添加分类的名称
cat_name: '',
// 父级分类的id
cat_pid: 0,
// 分类的等级,默认添加的是一级分类
cat_level: 0
},
// 添加分类表单的验证规则对象
addCateFormRules: {
cat_name: [
{ required: true, message: '请输入分类名称', trigger: 'blur' }
]
}
// 点击按钮,显示对话框
showAddCatDialog() {
this.addCateDialogVisible = true
}
// 父级分类的列表
parentCateList: []
// 点击按钮,显示对话框
showAddCatDialog() {
// 先获取父级分类的数据列表
this.getParentCateList()
// 再展示对话框
this.addCateDialogVisible = true
},
// 获取父级分类的数据列表
async getParentCateList() {
const { data: result } = await this.$http.get('categories', { params: { type: 2 } })
if (result.meta.status !== 200) {
return this.$message.error('获取父级分类数据失败!')
}
this.parentCateList = result.data
}
<el-form-item label="父级分类:" >
<el-cascader
v-model="selectedKeys"
:options="parentCateList"
:props="cascaderProps"
@change="parentCateChanged"
clearable></el-cascader>
</el-form-item>
// 父级分类的列表
parentCateList: [],
// 指定级联选择器的配置对象
cascaderProps: {
expandTrigger: 'hover',
value: 'cat_id',
label: 'cat_name',
children: 'children',
checkStrictly: true
},
// 选中的父级分类的id数组
selectedKeys: []
// 选择项发生变化触发
parentCateChanged() {
console.log(this.selectedKeys)
}
<el-button type="primary" @click="addCate">确 定</el-button>
// 选择项发生变化触发
parentCateChanged() {
// 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 { // 反之,就说明没有选中任何父级分类
this.addCateForm.cat_pid = 0
this.addCateForm.cat_level = 0
}
}
// 点击确定按钮添加新的分类
addCate() {
console.log(this.addCateForm)
}
<!-- 添加分类对话框 -->
<el-dialog
title="添加分类"
:visible.sync="addCateDialogVisible"
width="50%"
@close="addCateDialogClosed">
// 监听对话框的关闭事件,重置表单数据
addCateDialogClosed() {
this.$refs.addCateFormRef.resetFields()
this.selectedKeys = []
this.addCateForm.cat_level = 0
this.addCateForm.cat_pid = 0
}
// 点击确定按钮添加新的分类
addCate() {
// console.log(this.addCateForm)
this.$refs.addCateFormRef.validate(async valid => {
if (!valid) return this.$message.error('表单预校验失败!')
const { data: result } = await this.$http.post(
'categories',
this.addCateForm
)
if (result.meta.status !== 201) {
return this.$message.error('添加分类失败!')
}
this.$message.success('添加分类成功')
// 刷新列表
this.getCateList()
// 隐藏对话框
this.addCateDialogVisible = false
})
}
参考【Vue】实战项目:电商后台管理系统(Element-UI)(二)用户管理模块
<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="showAddCatDialog"
>添加分类</el-button
>
</el-col>
</el-row>
<!-- 表格区域 :data(设置数据源) :columns(设置表格中列配置信息) :selection-type(是否有复选框) :expand-type(是否展开数据) show-index(是否设置索引列) index-text(设置索引列头) border(是否添加纵向边框) :show-row-hover(是否鼠标悬停高亮) -->
<tree-table
:data="cateList"
:columns="columns"
:selection-type="false"
:expand-type="false"
show-index
index-text=""
border
class="treetable"
>
<!-- 是否有效 -->
<template slot="isok" slot-scope
版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/weixin_44972008/article/details/114789845
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!