角色模块，编写边做笔记01-三级权限展示

最新推荐文章于 2023-12-31 23:48:27 发布

爱生活，爱编程

最新推荐文章于 2023-12-31 23:48:27 发布

阅读量388

点赞数

分类专栏： VUE2.x

本文链接：https://blog.csdn.net/qq_15009739/article/details/114478166

版权

本文档记录了如何处理数据并使用模板渲染实现el-table中三级权限信息的展示。通过伪代码展示了处理数据的思路，并逐步详细介绍了如何样式化各级权限，包括添加边框、垂直居中显示以及添加删除权限的x号功能。最后提到了事件监听和删除功能的实现将在后续章节中讨论。

摘要由CSDN通过智能技术生成

上节我们提出一个需求，就是在el-table 展开行中，显示三级权限的信息

我就思考是不是有监听的方法，后来我想，一般遇到特殊需求问题，应该先处理数据，再在

模板中显示，所以思路就来了，先对如下的数据进行处理，再进行模板渲染就行了

伪代码：

       roleList.map(item => {
            // 1,得到三级权限：(getThreePre 递归函数)
            const threePre = getThreePre(item);
            // 2,修改原来对象：
            item.threePre = threePre;
            return item;
        })

行，上面只是思考问题的伪代码，以后遇到特殊需求，尽可能从遵循先处理数据，再进行模板渲染的操作，这样比较容易操作些！

————————————————————————————

我们继续，我们下面就是将权限渲染到展开行中（123 级都渲染出来！）

 <el-table-column type="expand">
                    <template slot-scope="scope">
                        <el-row v-for="(item) in scope.row.children" :key = "item.id">
                            <el-col :span="5">
                                <el-tag>{
  {item.authName}}</el-tag>
                                </el-col>
                            <el-col></el-col>
                        </el-row>
                    </template>
                </el-table-column>

1级权限就渲染出来了&#x