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多个元素的样式选择器问题,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • 详解vue-amap引入高德JS API的原理

    详解vue-amap引入高德JS API的原理

    vue-amap是对高德地图JS API进行封装的、适用于vue项目的地图组件库,本文主要介绍了vue-amap引入高德JS API的原理,具有一定的参考价值,感兴趣的可以了解一下
    2022-06-06
  • Vue商品控件与购物车联动效果的实例代码

    Vue商品控件与购物车联动效果的实例代码

    这篇文章主要介绍了Vue商品控件与购物车联动效果的实例代码,代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • 前端框架Vue.js构建大型应用浅析

    前端框架Vue.js构建大型应用浅析

    这篇文章主要为大家详细介绍了前端框架Vue.js构建大型应用的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • vue.js绑定事件监听器示例【基于v-on事件绑定】

    vue.js绑定事件监听器示例【基于v-on事件绑定】

    这篇文章主要介绍了vue.js绑定事件监听器的方法,结合实例形式分析了vue.js基于v-on事件绑定响应鼠标点击相关操作技巧,需要的朋友可以参考下
    2018-07-07
  • Vue中进行数据筛选与搜索功能实现常用的方法

    Vue中进行数据筛选与搜索功能实现常用的方法

    表格常用功能经常有字段筛选、更多字段筛选弹框来过滤出我们所需要的数据,下面这篇文章主要给大家介绍了关于Vue中进行数据筛选与搜索功能实现常用的方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • vue-admin-template解决登录和跨域问题解决

    vue-admin-template解决登录和跨域问题解决

    本文主要介绍了vue-admin-template解决登录和跨域问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • webstorm建立vue-cli脚手架的傻瓜式教程

    webstorm建立vue-cli脚手架的傻瓜式教程

    这篇文章主要给大家介绍了关于webstorm建立vue-cli脚手架的傻瓜式教程,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • 如何在 Vue.js 中使用第三方js库

    如何在 Vue.js 中使用第三方js库

    本篇文章主要介绍了如何在 Vue.js 中使用第三方js库,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • vue computed计算属性显示undefined的解决

    vue computed计算属性显示undefined的解决

    这篇文章主要介绍了vue computed计算属性显示undefined的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11

最新评论