89.(前端)商品分类显示优化——关闭选择框、下拉框、修改间隔、显示层级为tag标签、添加操作栏、添加索引

1.概述

对于上文使用的vue-table-with-tree-grid展示树形层级数据，我们应该做进一步的显示优化
官网地址：官网地址

2.最终效果展示

3.操作流程

1. 关闭选择框:selection-type=“false”
2. 关闭下拉框:expand-type=“false”
3. 修改新增分类按钮与列表之间的间隔margin-top
4. 显示第几个层级，在columns中添加属性
5. 给层级修改为tag标签的形式（模板查槽）
6. 给定竖线分隔border
7. 添加操作栏，在操作栏中添加删除、编辑按钮（暂不实现具体功能）
8. 添加索引列show-index

4.完整代码展示

<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"
                :selection-type="false"
                :expand-type="false"
                class="tree-table"
                border
                :show-index="true">

                
                
                <template slot="level" slot-scope="scope">
                    <el-tag v-if="scope.row.level === 1"> 一级分类 el-tag>
                    <el-tag v-else-if="scope.row.level === 2" type="success"> 二级分类 el-tag>
                    <el-tag v-else type="warning"> 三级分类 el-tag>
                template>
                <template slot="opt" slot-scope="scope">
                    <el-button size="mini" type="primary" icon="el-icon-edit">编辑el-button>
                    <el-button size="mini" type="danger" icon="el-icon-delete">删除el-button>
                template>
                tree-table>
            el-row>
        el-card>
    div>
template>

<script>
export default {
    data() {
        return {
            cateList: [],
            columns: [
                {label: '分类名称', prop: 'name'},
                {label: '分类等级', type:'template', template:'level'},
                {label: '分类等级', type:'template', template:'opt'}
            ]
        }
    },
    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>
<style lang="less" scoped>
.tree-table{
    margin-top: 15px;
}
style>
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71