免费创建小程序_elementUI Vue 单个按钮显示和隐藏

elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)       小编最近遇到这样的需求，当点击一个按钮可以变换里面字的内容，刚开始还真是一头雾水，不知所措。仔细想想屡屡思绪，很容易的解决了。接下来通过本文给大家介绍elementUI Vue 单个按钮显示和隐藏的变换功能,需要的朋友可以参考下

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

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

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

具体代码如下:

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