Element-ui 表格实现树形结构表格

电玩女神 2023-10-10 12:33 73阅读 0赞

前端效果展示:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70][]

在el-table中，支持树类型的数据的显示。当 row 中包含 `children` 字段时，被视为树形数据。渲染树形数据时，必须要指定 `row-key`。支持子节点数据异步加载。

通过指定 row 中的 `hasChildren` 字段来指定哪些行是包含子节点。`children` 与 `hasChildren` 都可以通过 `tree-props` 配置。

row-key="id"和:tree-props="\{children: 'children', hasChildren: 'hasChildren'\}是必须的。

下面是vue的表格树：

<el-row>
                <el-table :data="tableData" style="width: 100%;" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                            <el-table-column prop="privilegeName" label="权限名称" >
                            </el-table-column>
                            <el-table-column prop="privilegeCode" label="权限编码" >
                            </el-table-column>
                            <el-table-column prop="privilegeType" label="权限类别" :formatter="formatPrivilegeType" >
                            </el-table-column>
    
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    
                                    <el-button type="primary" size="mini" @click="toAdd(scope)">新增</el-button>
                                    <el-button type="primary" size="mini" @click="toEdit(scope)">编辑</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <br>
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pagination.pageIndex"
                            :page-sizes="[5, 10, 20, 30, 40]"
                            :page-size=pagination.pageSize
                            layout="total, prev, pager, next"
                            :total=pagination.total>
                        </el-pagination>
            </el-row>

后端代码：[SpringBoot+MyPlus+MySQL8 实现数据结构查询][SpringBoot_MyPlus_MySQL8]

前端全部代码:

### 总结： ###

一、注意需要在**前端**表格里面改的是：

![20210210121037487.png][]

二、后端主要改的是：

（1）视图层里面加入视图层集合属性，注意一定要命名为**children**，这样前端才能渲染成树型结构。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210210120650487.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n,size_16,color_FFFFFF,t_70
[SpringBoot_MyPlus_MySQL8]: https://blog.csdn.net/zhouzhiwengang/article/details/113780578
[20210210121037487.png]: https://img-blog.csdnimg.cn/20210210121037487.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210210121220858.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n,size_16,color_FFFFFF,t_70