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面向对象、prototype、call()、apply()
May 14 Javascript
浅谈javascript的原型继承
Jul 25 Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
May 03 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 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
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
类似框架的js代码
2006/11/09 Javascript
深入认识JavaScript中的函数
2007/01/22 Javascript
js 加载并解析XML字符串的代码
2009/12/13 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
Python中操作文件之write()方法的使用教程
2015/05/25 Python
Python爬取成语接龙类网站
2018/10/19 Python
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
课内比教学心得体会
2014/09/09 职场文书
2014年财政工作总结
2014/12/10 职场文书
人与自然的观后感
2015/06/18 职场文书
pt-archiver 主键自增
2022/04/26 MySQL