Vue|笔记8（商品分类【Vue实战项目：电商管理系统（Element-UI）】） javascript|node.js|vue.js

【Vue|笔记8（商品分类【Vue实战项目：电商管理系统（Element-UI）】）】
文章目录

- 1 样式
- - 1.1 设置路由
  - 1.2 完成表格区域展示
  - 1.3 实现分页功能
  - 1.4 实现添加分类功能
  - - 1.4.1 完成弹窗绘制
    - 1.4.2 完成提交添加分类功能
    - 1.4.3 弹窗关闭时，重置数据
  - 1.5 实现删除功能
  - 1.6 实现修改分类名称功能

1 样式

Vue|笔记8（商品分类【Vue实战项目：电商管理系统（Element-UI）】）

文章图片

1.1 设置路由

创建商品分类页面../components/goods/Cate.vue，并添加一些基本的元素

> export default { }; ="postcss" scoped>

设置路由

import Cate from '../components/goods/Cate.vue'Vue.use(Router)const router = new Router({routes: [ {path: '/home', component: Home, redirect: '/welcome', children: [ ... { path: '/categories', component: Cate }, ] } ] })

1.2 完成表格区域展示

在页面创建的时候，通过接口获取商品分类数据；

> export default {data() {return {// 商品分类数据列表接口查询条件 querInfo: {type: [], pagenum: 1, pagesize: 5, }, // 商品分类列表数据 cateList: [], total: 0, }; }, created() {this.getCateList(); }, methods: {// 获取商品分类数据 async getCateList() {const { data: res } = await this.$http.get("categories", {params: this.querInfo, }); if (res.meta.status !== 200) {return this.$message.error("商品分类数据列表失败！"); }this.cateList = res.data.result; this.total = res.data.total; console.log(this.cateList); }, }, };

绘制表格区域

使用的是第三方组件：vue-table-with-tree-grid
查看官方样例

安装后，在main.js中配置全局导入vue-table-with-tree-grid

// 导入vue-table-with-tree-grid import TreeTable from 'vue-table-with-tree-grid'// 全局注册 Vue.component('tree-table', TreeTable)

使用tree-table绘制表格

参数定义：

知识点：
vue-table-with-tree-grid的作用域插槽的形式

data() {return {... // 为table指定列的定义 columns: [ { label: "分类名称", prop: "cat_name" }, {label: "是否有效", // 表示将当前列定义成模板列 type: "template", // 表示当前这一列使用模板名称 template: "isok", }, {label: "排序", type: "template", template: "order", }, {label: "操作", type: "template", template: "opt", }, ], };

1.3 实现分页功能

绘制分页

实现监听 pagesize 和 pagenum 改变的方法

// 监听pagesize改变 handleSizeChange(newSize) {this.querInfo.pagesize = newSize; this.getCateList(); }, // 监听pagenum改变 handleCurrentChange(newPageNum) {this.querInfo.pagenum = newPageNum; this.getCateList(); },

文章图片

1.4 实现添加分类功能

文章图片

1.4.1 完成弹窗绘制

展开添加弹窗时，需要获取一、二级父级数据

// 添加分类弹窗中获取父级数据 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; },

绘制

="footer" class="dialog-footer"> 取消确定

父级分类的选择器使用的是Cascader 级联选择器.

1.4.2 完成提交添加分类功能

在选择父级分类时，需要做好响应参数的修改

// 添加分类选择项变化触发方法 parentCateChange() {console.log(this.selectKeys); // 如果selectKeys的长度大于0，则证明选中了父级分类 if (this.selectKeys.length > 0) {// 父id this.addCateForm.cat_pid = this.selectKeys[this.selectKeys.length - 1]; // 当前分类的等级赋值 this.addCateForm.cat_level = this.selectKeys.length; return; } else {// 长度为0时，添加的分类为一级分类 // 父id this.addCateForm.cat_pid = 0; // 当前分类的等级赋值 this.addCateForm.cat_level = 0; } },

提交添加请求

// 添加分类确定按钮 addCate() {this.$refs.addCateFormRef.validate(async (valid) => {if (!valid) return; // post 添加分类操作 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; }); },

1.4.3 弹窗关闭时，重置数据

重置表单数据

// 监听添加分类dialg的关闭事件，重置表单数据 addCateDialogClosed() {this.$refs.addCateFormRef.resetFields(); this.selectKeys = []; this.addCateForm.cat_level = 0; this.addCateForm.cat_pid = 0; },

1.5 实现删除功能

实现删除方法

// 通过id删除分类 async removeCateById(id) {const confirmResult = await this.$confirm( "此操作将永久删除该分类, 是否继续?", "提示", {confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", } ).catch((err) => {return err; }); // 如果用户确认删除，则返回值为字符串 confirm // 如果用户取消了删除，则返回值为字符串cancel console.log(confirmResult); if (confirmResult === "cancel") {this.$message.info("已取消删除"); } else {const { data: res } = await this.$http.delete("categories/" + id); if (res.meta.status !== 200) {userinfo.mg_state = !userinfo.mg_state; return this.$message.error("删除分类失败！"); }this.$message.success("删除分类成功！"); this.getCateList(); } },

1.6 实现修改分类名称功能

文章图片

绘制分类弹窗

="footer" class="dialog-footer"> 取消确定

打开编辑弹窗时，默认填充当前的分类名称

// 通过id获取分类信息 async showCateEditDialog(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; // 获取级联选择器的数据 this.getParentCateList(); // 级联选择器的数据填充 let cat_level = this.editCateForm.cat_level; console.log(cat_level); },

实现修改名称方法

// 提交编辑弹窗的内容 editCate() {this.$refs.editCateFormRef.validate(async (valid) => {if (!valid) return; // put 编辑分类操作 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; }); },