电商后台管理系统分类管理列表功能

一 点睛

商品分类概述

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

二 安装 vue-table-with-tree-grid依赖

三 代码

1 新建 Cate.vue 组件

<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>
            <!-- 表格 -->
            <!-- selection-type:是否展示复选框
            expand-type：是否为展开行
            show-index:是否显示索引列
            index-text:索引列标题头
            border：是否显示纵向边框
            show-row-hover:是否悬停高亮显示-->
            <tree-table class="tree-table"
                    :data="catelist"
                    :columns="columns"
                    :selection-type="false"
                    :expand-type="false"
                    :show-index="true"
                    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>
                <!-- 排序 -->
                <template slot="order" slot-scope="scope">
                    <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
                    <el-tag type="success" size="mini" v-else-if="scope.row.cat_level === 1">二级</el-tag>
                    <el-tag type="warning" size="mini" v-else>三级</el-tag>
                </template>
                <!-- 操作 -->
                <template slot="opt" slot-scope="scope">
                    <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>
            <!-- 分页 -->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum"
                    :page-sizes="[3, 5, 10, 15]"
                    :page-size="queryInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "Cate",
        data() {
            return {
                /* 查询条件*/
                queryInfo: {
                    type: 3,
                    pagenum: 1,
                    pagesize: 5
                },
                // 商品分类数据列表，默认为空
                catelist: [],
                /* 总数据条数 */
                total: 0,
                // 为table指定列的定义
                columns: [
                    {
                        label: '分类名称',
                        prop: 'cat_name',
                    },
                    {
                        label: '是否有效',
                        // 表示将当前列定义为模板列
                        type: 'template',
                        // 表示当前这一列使用模板名称
                        template: 'isok'
                    },
                    {
                        label: '排序',
                        // 表示将当前列定义为模板列
                        type: 'template',
                        // 表示当前这一列使用模板名称
                        template: 'order'
                    },
                    {
                        label: '操作',
                        // 表示将当前列定义为模板列
                        type: 'template',
                        // 表示当前这一列使用模板名称
                        template: 'opt'
                    },
                ]
            }
        },
        created() {
            this.getCateList()
        },
        methods: {
            /* 获取商品分类数据 */
            async getCateList() {
                const {data: res} = await this.$http.get('categories', {params: this.queryInfo})
                if (res.meta.status !== 200) {
                    return this.$message.error('获取商品分类失败')
                }
                // 把数据列表，赋值给 catelist
                this.catelist = res.data.result
                // 为总数据条数赋值
                this.total = res.data.total
            },
            // 监听pagesize改变事件
            handleSizeChange(newSize){
                this.queryInfo.pagesize= newSize
                this.getCateList()

            },
            // 监听pagenum改变事件
            handleCurrentChange(newPage){
                this.queryInfo.pagenum = newPage
                this.getCateList()
            }
        }
    }

</script>

<style scoped>
    .tree-table{
        margin-top: 15px;
    }
</style>

2 修改路由

import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入登录组件
import Login from "../components/Login";
// 导入Home 组件
import Home from "../components/Home";
// 导入Welcome 组件
import Welcome from "../components/Welcome";
// 导入 Users 组件
import Users from "../components/user/Users";
// 导入权限列表 组件
import Rights from "../components/power/Rights";
// 导入角色列表 组件
import Roles from "../components/power/Roles";
// 导入商品分类 组件
import Cate from "../components/goods/Cate";
import {renderThumbStyle} from "element-ui/packages/scrollbar/src/util";


Vue.use(VueRouter)

const routes = [
    // 路由重定向,当访问/,就会重定向到/login
    {
        path: '/',
        redirect: '/login'
    },
    // 定义登录路由规则
    {
        path: '/login',
        component: Login
    },
    // 定义Home的路由规则
    {
        path: '/home',
        component: Home,
        redirect: '/welcome',
        children: [
            {
                path: '/welcome',
                component: Welcome
            },
            /* 用户管理 */
            {
                path: '/users',
                component: Users
            },
            /* 权限管理 */
            {
                path: '/rights',
                component: Rights
            },
            /* 角色管理 */
            {
                path: '/roles',
                component: Roles
            },
            /* 商品分类 */
            {
                path: '/categories',
                component: Cate
            },

        ]
    }
]

const router = new VueRouter({
    routes
})
// 挂载路由导航守卫
// to 将要访问的路径
// from 代表从哪个路径跳转而来
// next 是个函数，表示放行 next() 放行  next('/login') 强制跳转
router.beforeEach((to, from, next) => {
    // 如果用户访问的登录页，直接放行
    if (to.path === '/login') return next();
    // 从 sessionStorage 中获取到保存的 token 值
    const tokenstr = window.sessionStorage.getItem('token')
    // 没有 token，强制跳转到登录页
    if (!tokenstr) return next('/login')
    next()
})

export default router

3 修改main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
// 导入阿里的字体图标
import './assets/fonts/iconfont.css'
// 导入全局样式表,使得全局样式生效
import './assets/css/global.css'
// 全局导入axios
import axios from 'axios'
// 导入TreeTable 插件
import TreeTable from 'vue-table-with-tree-grid'
// 设置axios请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
// axios请求拦截
axios.interceptors.request.use(config => {
    // 为请求头对象，添加 Token 验证的 Authorization 字段
    config.headers.Authorization = window.sessionStorage.getItem('token')
    return config
})
Vue.prototype.$http = axios


Vue.config.productionTip = false
// 注册 TreeTable 组件
Vue.component('tree-table',TreeTable)

new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

四 效果

五 源码参考

https://gitee.com/cakin24/vue_shop