一代码

1 修改 Cate.vue

<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><!-- 表格 --><!-- selection-type:是否展示复选框expand-type：是否为展开行show-index:是否显示索引列index-text:索引列标题头border：是否显示纵向边框show-row-hover:是否悬停高亮显示--><tree-table class="tree-table":data="catelist":columns="columns":selection-type="false":expand-type="false":show-index="true"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><!-- 排序 --><template slot="order" slot-scope="scope"><el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag><el-tag type="success" size="mini" v-else-if="scope.row.cat_level === 1">二级</el-tag><el-tag type="warning" size="mini" 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-dialogtitle="添加分类":visible.sync="addCatedialogVisible"width="50%" @close="addCateDialogCloded"><!-- 添加分类表单 --><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 :用来指定配置对象--><!-- model :选中的父级分类的Id数组--><!-- change :当选中改变时触发的事件--><!-- clearable :清空选择--><el-cascaderexpand-trigger="expand-trigger"v-model="selectedKeys":options="parentCateList":props="cascaderProps"@change="parentCateChanged"clearablechange-on-select></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 {name: "Cate",data() {return {/* 查询条件*/queryInfo: {type: 3,pagenum: 1,pagesize: 5},// 商品分类数据列表，默认为空catelist: [],/* 总数据条数 */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: '',// 父级分类idcat_pid: 0,// 当前分类等级，默认添加是1级分类cat_level: 0},// 添加分类表单数据对象校验规则addCateFormRules: {// 分类名称校验规则cat_name: [{required: true,message: '请输入分类名称',trigger: 'blur'}]},// 父级分类的列表parentCateList: [],// 级联选择器配置对象cascaderProps: {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('获取商品分类失败')}// 把数据列表，赋值给 catelistthis.catelist = res.data.result// 为总数据条数赋值this.total = res.data.total},// 监听pagesize改变事件handleSizeChange(newSize) {this.queryInfo.pagesize = newSizethis.getCateList()},// 监听pagenum改变事件handleCurrentChange(newPage) {this.queryInfo.pagenum = newPagethis.getCateList()},// 点击按钮，展示添加分类对话框showAddCateDialog() {// 获取父级分类的数据列表this.getPatentCateList()this.addCatedialogVisible = true},// 获得父级分类的数据列表async getPatentCateList() {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() {// 如果 selectedKeys 数组中的length 大于0，证明选择了父级分类// 反之，就说明没有选中任何父级分类if (this.selectedKeys.length > 0) {// 父级分类的Idthis.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1]// 当前分类的等级this.addCateForm.cat_level = this.selectedKeys.length} else {// 父级分类的Idthis.addCateForm.cat_pid = 0// 当前分类的等级this.addCateForm.cat_level = 0}},// 点击按钮，添加分类async addCate() {this.$refs.addCateFormRef.validate(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},// 监听对话框的关闭事件，重置表单数据addCateDialogCloded() {this.$refs.addCateFormRef.resetFields()this.selectedKeys = []this.addCateForm.cat_level = 0this.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.datathis.editCateDialogVisible = true},// 编辑分类名eidtCate() {this.$refs.editCateFormRef.validate(async valid => {if (!valid) returnconst {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 scoped>.tree-table {margin-top: 15px;}.el-cascader {width: 100%;}
</style>

2 修改 element.js

import Vue from 'vue'
// 按需分配各个组件
import {Button,Form,FormItem,Input,Message,Container,Header,Aside,Main,Menu,Submenu,MenuItem,Breadcrumb,BreadcrumbItem,Card,Row,Col,Table,TableColumn,Switch,Tooltip,Pagination,Dialog,MessageBox,Tag,Tree,Select,Option,Cascader
} from 'element-ui'Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItem)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
Vue.use(Card)
Vue.use(Row)
Vue.use(Col)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Switch)
Vue.use(Tooltip)
Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(Tag)
Vue.use(Tree)
Vue.use(Select)
Vue.use(Option)
Vue.use(Cascader)
// 这里和其他组件不一样，需要通过 prototype 全局挂载 Message
Vue.prototype.$message = Message
Vue.prototype.$confirm = MessageBox.confirm

二效果

三源码参考

https://gitee.com/cakin24/vue_shop

电商后台管理系统添加编辑和删除商品分类相关推荐

Vue全家桶 - 电商后台管理系统项目开发实录（详）
目录 1. 项目概述 1.1 电商项目基本业务概述 1.2 电商后台管理系统的功能 1.3 电商后台管理系统的开发模式(前.后端分离) 2. 项目初始化 2.1 前端项目初始化步骤码云相关操作 2. ...
Vue全家桶-电商后台管理系统项目开发
项目效果展示: 1. 项目概述 1.1 电商项目基本业务概述一般情况下客户使用的业务服务包括:PC端,小程序,移动web,移动app. 管理员使用的业务服务:PC后台管理端: PC后台管理端的功能 ...
【Vue】实战项目：电商后台管理系统（Element-UI）（一）前后端搭建 - 登录界面 - 主页界面
文章目录 0. 项目介绍电商管理系统(Element-UI) 开发模式前端技术栈后端技术栈 1. 配置--初始化前端项目 ① 安装 Vue 脚手架 ② 通过 Vue 脚手架创建项目 ③ 配置 ...
前端开发Vue项目实战：电商后台管理系统（一）前后端搭建
目录 1. 项目概述 2. 前端项目初始化步骤 3. 后台项目的环境安装配置下载安装phpStudy,添加数据库 Postman测试工具验证 1. 项目概述电商项目基本业务概述: 根据不同的应用 ...
Vue电商后台管理系统项目开发实战（一）
前言当下根据不同的应用场景,电商系统一般都提供了PC端,移动APP,移动Web,微信等多种访问方式.如下图. 不同的客户端共用同一个服务器,数据库,API.本次项目着重设计PC后台管理,供电商后台管 ...
Vue2项目总结-电商后台管理系统
Vue2项目总结-电商后台管理系统去年做的项目,拖了很久,总算是打起精力去做这个项目的总结,并对Vue2的相关知识进行回顾与复习各个功能模块如果有过多重复冗杂的部分,将会抽取部分值得记录复习的地方 ...
电商后台管理系统简介
项目介绍黑马后台管理系统是一个电商后台管理系统的前端项目,基于Vue+Element实现. 主要包括商品管理.订单管理.会员管理.促销管理.运营管理.内容管理.统计报表.财务管理.权限管理.设置等功 ...
Vue+Element-UI 电商后台管理系统详细总结
一.概述基于 Vue 和 Element-UI 的电商后台管理系统 1.1 实现功能用户登录/退出用户管理用户列表实现用户的增删改查.分页查询以及分配角色功能权限管理角色列表实现角色的 ...
基于Vue实现智慧社区电商后台管理系统
作者主页:编程指南针作者简介:Java领域优质创作者.CSDN博客专家 .掘金特邀作者.多年架构师设计经验.腾讯课堂常驻讲师主要内容:Java项目.前端项目.小程序开发.Python开发.大数据和 ...

电商后台管理系统添加编辑和删除商品分类

一代码

1 修改 Cate.vue

2 修改 element.js

二效果

三源码参考

电商后台管理系统添加编辑和删除商品分类相关推荐

最新文章

热门文章

电商后台管理系统添加编辑和删除商品分类

一 代码

1 修改 Cate.vue

2 修改 element.js

二 效果

三 源码参考

电商后台管理系统添加编辑和删除商品分类相关推荐

最新文章

热门文章

一代码

二效果

三源码参考