elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)

来源：懂视网责编：小采时间：2020-11-27 22:08:25

elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)

elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法):在做后台管理系统中遇到一个需求, 点击一个按钮可以变换里面字的内容当状态为显示的时候, 该行第一个按钮为隐藏; 当状态为隐藏的时候, 该行第一个按钮为显示; 具体代码如下:  <el-table :data=tableData

推荐度：

点击下载本文 文档为doc格式

导读elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法):在做后台管理系统中遇到一个需求, 点击一个按钮可以变换里面字的内容当状态为显示的时候, 该行第一个按钮为隐藏; 当状态为隐藏的时候, 该行第一个按钮为显示; 具体代码如下:  <el-table :data=tableData

在做后台管理系统中遇到一个需求, 点击一个按钮可以变换里面字的内容

当状态为显示的时候, 该行第一个按钮为隐藏;

当状态为隐藏的时候, 该行第一个按钮为显示;

具体代码如下:

<!-- 数据表格 -->
<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 单个按钮显示和隐藏的变换功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)

推荐度：

点击下载本文 文档为doc格式

标签： VUE 变换按钮

热门焦点

elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)

elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)

elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)

最新推荐

猜你喜欢

热门推荐