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 相关文章推荐
JQUERY THICKBOX弹出层插件
Aug 30 Javascript
有趣的JavaScript数组长度问题代码说明
Jan 20 Javascript
Prototype源码浅析 String部分(二)
Jan 16 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
Oct 19 Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
Jul 13 Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
taro开发微信小程序的实践
May 21 Javascript
微信小程序实现点赞业务
Feb 10 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
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
laravel通过a标签从视图向控制器实现传值
2019/10/15 PHP
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
js 实现菜单上下显示附效果图
2013/11/21 Javascript
jquery prop的使用介绍及与attr的区别
2013/12/19 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
Python深入学习之闭包
2014/08/31 Python
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
python实现将内容分行输出
2015/11/05 Python
Python使用matplotlib绘图无法显示中文问题的解决方法
2018/03/14 Python
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
学python最电脑配置有要求么
2020/07/05 Python
python打包生成so文件的实现
2020/10/30 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
课程设计心得体会
2013/12/28 职场文书
参观监狱心得体会
2014/01/02 职场文书
搞笑创意广告语
2014/03/17 职场文书
学习交流会主持词
2014/04/01 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
2015毕业寄语大全
2015/02/26 职场文书
新学期开学标语2015
2015/07/16 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书