黑马】分类管理

目录

​一.新建一个商品分类分支

二.创建goods和商品相关的组件文件夹

三.布置页面和获取数据

四.需要第三方插件来实现树形结构

1.安装依赖 vue-table-with（在vue ui界面里面）

2.注册成为全局组件，在入口文件中进行注册

3.获取数据源

4.columns指定当前列的属性

---

对应的后台管理

 一.新建一个商品分类分支

查看分支git branch

是处于master

新建商品分类分支git checkout -b goods_cate

再次查看所属分支，处于新建的分支

推送到码云

如果码云中有该分支，直接git push

如果没有该分支，推送的时候需要顺便新建一个该分支，使用-u

git push -u origin goods_cate

二.创建goods和商品相关的组件文件夹

cate.vue

初始化组件结构

在路由中进行加载到页面中显示

        {path:'/categories',component:Cate},

这个地址是直接跳转页面粘贴过来的

三.布置页面和获取数据

 目标demo模式

需要有面包屑，有卡片区域，卡片区域里有添加分类按钮

<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">添加分类</el-button>
                </el-col>
            </el-row>
        </el-card>  
    </div>

 在结构区里进行获取数据

export default {
    data() {
        return {
            //查询条件
            querInfo: {
                type: 3,
                pagenum: 1,
                pagesize: 5
            },
            //商品分类的数据列表，默认为空
            cateList: []
        }
    },

    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('获取商品分类失败！')
            }
            console.log(res.data)
        }
    }
}

现在可以获取到数据

 把获取到的数据按需保存到本项目的私有数据中

  //获取到的真实的数据都在result中
            //把数据列表赋值给 cateList
            this.cateList=res.data.result
            //为总数据条数赋值
            this.total=res.data.total

 四。需要第三方插件来实现树形结构

1.安装依赖 vue-table-with（在vue ui界面里面）

2.注册成为全局组件，在入口文件中进行注册

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

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

3.获取数据源

  <!-- 表格区 :data="catelist"是表格的数据源，接下来还需要指定列-->

            <tree-table :data="catelist"></tree-table>

4.columns指定当前列的属性

 

 官方定义如上

props指定要绑定的属性

  <!-- 表格区 :data="catelist"是表格的数据源，接下来还需要指定列-->
            <tree-table :data="cateList" :columns="columns"></tree-table>

  //为table列进行定义， lable指定标题，prop指定具体的值
            columns: [
                {
                    lable:'分类名称',
                    prop:'cat_name'
                }
            ]

 删除复选框，

:selection-type="false"

    <!-- 表格区 :data="catelist"是表格的数据源，接下来还需要指定列-->
            <!-- 移除复选框:selection-type="false" -->
            <!-- 移除展开行  :expand-type="false" -->
            <!-- 加一个索引值show-index，设置为TRUE，直接写上就可以 -->
            <!-- index-text设计索引的名称 -->
            <!-- border显示纵向的边框 -->
            <!-- show-row-hover="false"鼠标悬停的时候不高亮显示 -->
            <tree-table :data="cateList" :columns="columns"
            :selection-type="false"
            :expand-type="false"
            show-index
            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>
        </tree-table>

  //为table列进行定义， lable指定标题，prop指定具体的值
            columns: [
                {
                    label:'分类名称',
                    prop:'cat_name',
                },
                {
                    label:'是否有效',
                //表示将当前定义为模版列
                type:'template',
                //表示当前这一列使用模版名称
                template:'isok'
                }

 呈现的样式

 是否有效为绿色的

学到了103集