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

 更新时间:2023年11月17日 09:38:04   作者:在奋斗的大道  
这篇文章主要介绍了elementui之el-table如何通过v-if控制按钮显示与隐藏问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

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

前端效果演示

后端代码

 <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>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 手把手教你使用宝塔部署Vue项目

    手把手教你使用宝塔部署Vue项目

    这篇文章主要给大家介绍了关于如何使用宝塔部署Vue项目的相关资料,宝塔面板提供了非常方便的方式来部署 Vue 项目,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • Vue使用json-server进行后端数据模拟功能

    Vue使用json-server进行后端数据模拟功能

    这篇文章主要介绍了Vue使用json-server进行后端数据模拟功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-04-04
  • Vue3 TypeScript 实现useRequest详情

    Vue3 TypeScript 实现useRequest详情

    本文介绍了Vue3 TypeScript实现useRequest详情,useRequest可能是目前社区中最强大,最接地气的请求类 Hooks了。可以覆盖99%的网络请求场景,无论是读还是写,无论是普通请求还是分页请求,无论是缓存还是防抖节流,通通都能支持,关于其介绍需要的小伙伴可以参考一下
    2022-05-05
  • vue如何使用HMAC-SHA256签名算法

    vue如何使用HMAC-SHA256签名算法

    这篇文章主要介绍了vue使用HMAC-SHA256签名算法的相关知识,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-07-07
  • vue之“} expected“和“at-rule or selector expected“报错的解决

    vue之“} expected“和“at-rule or selector ex

    这篇文章主要介绍了vue之“} expected“和“at-rule or selector expected“报错的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • 浅谈element关于table拖拽排序问题

    浅谈element关于table拖拽排序问题

    本文主要介绍了element关于table拖拽排序问题,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • element中table操作按钮展示与折叠的实现示例

    element中table操作按钮展示与折叠的实现示例

    因为随着功能的增多,table操作栏中的功能按钮增多,这时候就需要折叠,本文主要介绍了element中table操作按钮展示与折叠的实现示例,具有一定的参考价值,感兴趣的可以了解一下
    2022-04-04
  • Vue项目markdown内容预览显示优化方式

    Vue项目markdown内容预览显示优化方式

    在Vue项目中使用markdown-it组件预览Markdown内容时,通过安装pnpm和markdown-it-github-markdown-css依赖,并重写markdown部分样式,实现了Markdown内容的美化,在MarkdownPreview.vue组件中,通过变量renderedMarkdown接收并渲染Markdown内容
    2025-10-10
  • 详解element-ui设置下拉选择切换必填和非必填

    详解element-ui设置下拉选择切换必填和非必填

    这篇文章主要介绍了详解element-ui设置下拉选择切换必填和非必填,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • vue项目中监听手机物理返回键的实现

    vue项目中监听手机物理返回键的实现

    这篇文章主要介绍了vue项目中监听手机物理返回键的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01

最新评论