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>

总结

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

相关文章

  • vue3.0封装轮播图组件的步骤

    vue3.0封装轮播图组件的步骤

    这篇文章主要介绍了vue3.0封装轮播图组件的步骤,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03
  • Vue中CSS scoped的原理详细讲解

    Vue中CSS scoped的原理详细讲解

    在组件中增加的css加了scoped属性之后,就在会在当前这个组件的节点上增加一个data-v-xxx属性,下面这篇文章主要给大家介绍了关于Vue中CSS scoped原理的相关资料,需要的朋友可以参考下
    2023-01-01
  • 关于vue-router的使用及实现原理

    关于vue-router的使用及实现原理

    这篇文章主要介绍了关于vue-router的使用及实现原理,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • vue计算属性get和set用法示例

    vue计算属性get和set用法示例

    这篇文章主要介绍了vue计算属性get和set用法,结合实例形式分析了计算属性的功能及get和set用法的具体使用技巧,需要的朋友可以参考下
    2019-02-02
  • vue3封装echarts组件的实现步骤

    vue3封装echarts组件的实现步骤

    这篇文章主要介绍了如何在Vue3中封装一个高效、可复用的ECharts组件TChart,该组件支持响应式图表、空数据展示、事件监听、主题切换和性能优化等功能,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-01-01
  • Vue 页面权限控制和登陆验证功能的实例代码

    Vue 页面权限控制和登陆验证功能的实例代码

    这篇文章主要介绍了Vue 页面权限控制和登陆验证功能的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • 如何使用Vue3实现文章内容中多个"关键词"标记高亮显示

    如何使用Vue3实现文章内容中多个"关键词"标记高亮显示

    高亮显示是我们日常开发中经常会遇到的需求,下面这篇文章主要给大家介绍了关于如何使用Vue3实现文章内容中多个"关键词"标记高亮显示的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • Vue前端如何实现生成PDF并下载功能详解

    Vue前端如何实现生成PDF并下载功能详解

    在前端的岗位上经常需要实现个生成个并下载的可视化图表页PDF文件,这篇文章主要给大家介绍了关于Vue前端如何实现生成PDF并下载功能的相关资料,需要的朋友可以参考下
    2021-10-10
  • 如何解决vuex在页面刷新后数据被清除的问题

    如何解决vuex在页面刷新后数据被清除的问题

    这篇文章主要介绍了如何解决vuex在页面刷新后数据被清除的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vant 自定义 van-dropdown-item的用法

    vant 自定义 van-dropdown-item的用法

    这篇文章主要介绍了vant 自定义 van-dropdown-item的用法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08

最新评论