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)
1
2
3
4
5

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

<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>
            
            <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

4.效果展示

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