【Vue】实战项目：电商后台管理系统（Element-UI）（四）商品管理模块-商品分类功能

1 介绍

商品分类用于在购物时，快速找到所要购买的商品，可以通过电商平台主页直观的看到

2 创建git分支

git checkout -b goods_cate

git push -u origin goods_cate

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

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

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

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

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

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

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

1. 安装依赖-运行依赖
   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-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>

4. 在数据中添加columns

// 在数据中添加columns:
columns: [
    {
   label:'分类名称',prop:'cat_name'}
]

5. 设置表格与按钮之间的间距

.treetable{
   
  margin-top: 15px;
}

7 使用自定义模板渲染表格数据列

<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'
  }
]

8 渲染排序和操作对应的UI结构

<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'
  }
]

9 实现分页功能

<!-- 分页区域 -->
<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-