elementui 表格如何使操作中隐藏一个按钮

最新推荐文章于 2023-08-18 14:19:43 发布

weixin_30878501

最新推荐文章于 2023-08-18 14:19:43 发布

阅读量1.7k

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/opcec/p/10251324.html

本文介绍如何在 Element UI 的表格组件中实现基于角色的权限控制，通过判断角色权限来动态显示操作按钮，如修改和删除。示例代码展示了如何使用 v-if 条件渲染按钮，仅当角色为‘地区管理员’时显示。

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

<el-table-column label="权限"min-width="100">
    <template scope="scope">
        <!--假设权限的字段是role-->
        <span>{{scope.row.sole}}</span>
    </template>
</el-table-column>
<el-table-column label="操作" min-width="200">
    <template scope="scope">
        <!--v-if判断，如果当前行的角色权限是‘地区管理员’，就显示按钮，否则不显示-->
        <el-button type="primary" size="small"
                   @click="editDo(scope.row.proCatalogId,1)" v-if="scope.row.sole==='地区管理员'">修改
        </el-button>
        <el-button type="danger" size="small"  v-if="scope.row.sole==='地区管理员'"
                   @click="deleteDo(scope.row)">删除
        </el-button>
    </template>
</el-table-column>