Vue_shop学习69：角色列表的分配权限的展开行渲染

¡Venceremo

于 2023-04-22 10:50:26 发布

阅读量107

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue_shop 文章标签：学习

本文链接：https://blog.youkuaiyun.com/weixin_47295886/article/details/130301743

Vue_shop 专栏收录该内容

93 篇文章

订阅专栏

文章讲述了如何在前端实现展示不同权限级别的数据，通过使用ElementUI的el-table-column组件和作用域插槽来渲染展开列。内容涉及到三层for循环，用于动态渲染从一级到三级的权限结构，同时提到了使用pre标签进行数据的格式化展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先不同权限的级别

查看该行的数据信息，.children拿到所有权限

使用作用域插槽的形式，获取

     <!-- 展开列 -->
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        {{scope.row}}
                       
                    </template>
                </el-table-column>

结构美化的效果 pre

             <!-- 展开列 -->
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <pre>
                            {{scope.row}}
                        </pre>
                       
                       
                    </template>
                </el-table-column>