88.(前端)商品分类TreeTable的显示——前端层级数据展示

1.概述

一般来说，我们在显示列表时，前端通过表格显示。但是，由于分类菜单有层级结构，在显示时，我们想看出层级，所以我们课让树显示在列表里。但是element-ui默认是不支持的，需要安装第三方插件（vue-table-with-tree）

2.安装插件vue-table-with-tree

2.1 方式1

可以去查看如何使用，下载方式等
安装地址https://github.com/MisterTaki/vue-table-with-tree-grid

2.2 方式2（推荐）

去到vue-ui中安装依赖

2.3引入插件

// src/plugin/elements
import Vue from 'vue'
import TreeTable from 'vue-table-with-tree-grid'
// 引用时给的名字、导入的名称
Vue.component('tree-table', TreeTable)

3.使用插件展示层级数据

<!-- src/components/goods/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 :gutter="20">
                <el-col :span="2">
                    <el-button type="primary" icon="el-icon-circle-plus-outline">新增分类</el-button>
                </el-col>
            </el-row>
            <!-- 表格数据的展示——商品分类TreeTable的显示 -->
            <el-row>
                <tree-table :data="cateList" :columns="columns"></tree-table>
            </el-row>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            cateList: [],
            columns: [{label: '分类名称', prop: 'name'}]
        }
    },
    created() {
        this.getCateList()
    },
    methods: {
        async getCateList() {
            const { data: resp} = await this.$axios.get('/api/category_list')
            if (resp.status !== 200) return this.$msg.error(resp.msg)
            this.cateList = resp.data.data
        }
    }
}
</script>

4.效果展示

下篇文章会进一步美观页面