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 相关文章推荐
改进UCHOME的记录发布,增强可访问性用户体验
Jan 17 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
从数组中随机取x条不重复数据的JS代码
Dec 24 Javascript
javascript实现json页面分页实例代码
Feb 20 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
详解JavaScript常量定义
Jan 03 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 Javascript
JS中数组与对象的遍历方法实例小结
Aug 14 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
JS实现容器模块左右拖动效果
Jan 14 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实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
php实现图片压缩处理
2020/09/09 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
浅谈Vuejs Prop基本用法
2017/08/17 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
原生JavaScript实现进度条
2021/02/19 Javascript
Python编码时应该注意的几个情况
2013/03/04 Python
Python中用max()方法求最大值的介绍
2015/05/15 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
Python selenium爬取微信公众号文章代码详解
2020/08/12 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
五年级数学教学反思
2014/02/11 职场文书
教研处工作方案
2014/05/26 职场文书
5s标语大全
2014/06/23 职场文书
运动会表扬稿范文
2015/05/05 职场文书
2016年会开场白台词
2015/06/01 职场文书
生产设备维护保养制度
2015/08/06 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书
python - asyncio异步编程
2021/04/06 Python
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python
教你用Python matplotlib库制作简单的动画
2021/06/11 Python