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

1 样式

1.1 设置路由

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

<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</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>

<script>
export default {
   };
</script>

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

• 设置路由

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 完成表格区域展示

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

<script>
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);
    },
  },
};
</script>

• 绘制表格区域

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