前端开发Vue项目实战：电商后台管理系统（五）------ 商品管理模块 --- 商品分类功能

最新推荐文章于 2025-03-30 14:16:42 发布

举一个栗子吖

最新推荐文章于 2025-03-30 14:16:42 发布

阅读量3.2k

点赞数 2

分类专栏：目标检测文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_45359288/article/details/124655464

版权

本文详细介绍了如何在Vue.js项目中开发一个商品分类组件，包括通过路由加载组件、页面布局设计、调用API获取数据、使用vue-table-with-tree-grid展示数据、实现分页、编辑、删除功能，以及提交代码到远程仓库的完整流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

git checkout -b goods_cate
git push -u origin goods_cate

1. 通过路由加载商品分类组件

创建组件 components/goods/Cate.vue并通过路由组件挂载到页面中

//Cate.vue
<template>
  <div>
     商品分类组件
  </div>
</template>

<script>
export default {
   
    data(){
   
        return {
   }
    },
    created(){
   },
    methods:{
   }

}
</script>

<style lang="less" scoped>
</style>

//router.js
import Cate from './components/goods/Cate.vue'
const routes = [
  {
   
    path: '/home',
    component: Home,
    children: [
      {
   path: '/categories', component: Cate },
    ]
  },
]

2. 绘制商品分类组件的基本页面布局

<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>

3. 调用API获取商品分类列表数据

在这里插入图片描述

export default {
   
    data() {
   
        return {
   
            //发起获取商品分类数据的get查询条件
            queryInfo: {
   
                type: 3,     //获取所有类别数据
                pagenum: 1,  //当前页码值，默认第一页
                pagesize: 5, //每页显示多少条数据，默认显示5条
            },
            //商品分类的数据列表，默认为空，get请求成功后会赋值
            catelist: [],
            //获取商品分类总数据条数，默认为0，get请求成功后会赋值
            total: 0,
        }
    },
    created() {
   
        this.getCateList()
    },
    methods: {
   
        //get请求获取商品分类数据
        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.data)
            //获取成功后，将返回的数据保存至catelist
            this.catelist = res.data.result
            //获取成功后，将返回的总数据条数保存至catelist
            this.total = res.data.total
        },
    },
}

4. 使用vue-table-with-tree-grid树形表格组件

在这里插入图片描述

1. 安装依赖 vue-table-with-tree-grid
点击查看详情，可以跳转到 github 仓库使用教程 https://github.com/MisterTaki/vue-table-with-tree-grid

2. main.js中导入插件

import TreeTable from 'vue-table-with-tree-grid'

Vue.component('tree-table', TreeTable)

3. 使用组件展示分类数据

<!-- 分类表格    :data(设置数据源) :columns(设置表格中列配置信息) :selection-type(是否有复选框)
                :expand

最低0.47元/天解锁文章