基于vue，如下图所示，要实现表格里面的三级分类，用vue-table-with-tree-grid插件比较好，vue-table-with-tree-grid官方说明及用法在https://github.com/MisterTaki/vue-table-with-tree-grid（本人小白一个，暂时在此为了记录一些知识），直接安装步骤及如何使用：

安装插件：

1.首先在vue可视化工具里面搜索依赖项vue-table-with-tree-grid并点击安装

2. 在vue项目中的main.js引入并全局配置

具体使用直接上代码：

<template>
    <div>
        <!-- 卡片视图区 -->
        <el-card>

            <!-- 表格 -->
            <tree-table  :border="true" :show-index="true" :expand-type="false"  index-text="索引" :selection-type='false' :data="cateList" :columns="columns">

            </tree-table>
            <!-- 分页 -->
        </el-card>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                // 查询条件
                queryInfo: {
                    type:3,
                    pagenum:1,
                    pagesize:10
                },
                // 商品分类的数据列表
                cateList: [],
                // 总数据条数
                total:0,
                // 为table指定列的定义
                columns: [
                    {
                        label: '分类名称',
                        prop: 'cat_name'
                    }
                ]
            }
        },
        created() {
            this.getCateList()
        },
        methods: {
            // 获取商品分类数据
            getCateList() {
                this.$http.get('categories',{ params: this.queryInfo }).then( res => {
                    console.log(res)
                    if (res.data.meta.status !== 200) {
                        return this.$message.error('获取用户数据失败')
                    } else {
                        this.cateList = res.data.data.result
                        this.total = res.data.data.total
                    }
                })
            }
        }
    }
</script>