elementui 之el-table通过v-if 控制按钮显示与隐藏分析

java哥 阅读:774 2021-03-31 12:25:56 评论:0

前端效果演示:

后端代码:

 <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  v-if="scope.row.privilegeType === '1' || scope.row.privilegeType === '2'" 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>

 

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
KIKK导航

KIKK导航

排行榜
关注我们

一个IT知识分享的公众号