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


Posted in Javascript onSeptember 04, 2018

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

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

Javascript 相关文章推荐
js+css在交互上的应用
Jul 18 Javascript
javascript权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
javascript中的变量作用域以及变量提升详细介绍
Oct 24 Javascript
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
微信小程序之picker日期和时间选择器
Feb 09 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Apr 22 Javascript
详解VSCode配置启动Vue项目
May 14 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 #jQuery
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 #Javascript
基于element-ui的rules中正则表达式
Sep 04 #Javascript
微信小程序的部署方法步骤
Sep 04 #Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 #Javascript
Element UI 自定义正则表达式验证方法
Sep 04 #Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 #Javascript
You might like
简单易用的计数器(数据库)
2006/10/09 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
2017/12/28 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
Python实现简单的四则运算计算器
2016/11/02 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
解决DataFrame排序sort的问题
2018/06/07 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
深入了解Django View(视图系统)
2019/07/23 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
python正则过滤字母、中文、数字及特殊字符方法详解
2020/02/11 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
实习护理工作自我评价
2013/09/25 职场文书
工作会议欢迎词
2014/01/16 职场文书
大学活动邀请函
2014/01/28 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
社区母亲节活动总结
2015/02/10 职场文书
python如何在word中存储本地图片
2021/04/07 Python
python 远程执行命令的详细代码
2022/02/15 Python
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers
Redis基本数据类型Set常用操作命令
2022/06/01 Redis