小编给大家分享一下elementUI Vue如何实现单个按钮显示和隐藏的变换功能，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
在做后台管理系统中遇到一个需求, 点击一个按钮可以变换里面字的内容
当状态为显示的时候, 该行第一个按钮为隐藏;
当状态为隐藏的时候, 该行第一个按钮为显示;
具体代码如下:
<!-- 数据表格 -->
<el-table :data="tableData" class="table" stripe border v-loading="loading">
<el-table-column type="index" label="序号" width="70"></el-table-column>
<el-table-column prop="status" label="状态"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="warning" @click="handleIsDisplay(scope.$index, scope.row)">
{{scope.row.status=='显示'?'隐藏':'显示'}}
</el-button>
<el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<!-- <el-button size="mini" type="danger" @click="handleRemove(scope.$index, scope.row)">删除</el-button> -->
</template>
</el-table-column>
</el-table>也可以用第二种方法:
<!-- 数据表格 -->
<el-table :data="tableData" class="table" stripe border v-loading="loading">
<el-table-column type="index" label="序号" width="70"></el-table-column>
<el-table-column prop="status" label="状态"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button v-if="scope.row.status=='显示'" size="mini" type="warning"
@click="handleIsDisplay(scope.$index, scope.row)">隐藏</el-button>
<el-button v-if="scope.row.status=='隐藏'" size="mini" type="warning"
@click="handleIsDisplay(scope.$index, scope.row)">显示</el-button>
<el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<!-- <el-button size="mini" type="danger" @click="handleRemove(scope.$index, scope.row)">删除</el-button> -->
</template>
</el-table-column>
</el-table>看完了这篇文章，相信你对“elementUI Vue如何实现单个按钮显示和隐藏的变换功能”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网行业资讯频道，感谢各位的阅读！
