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 相关文章推荐
Javascript - HTML的request类
Jan 09 Javascript
Js 时间函数getYear()的使用问题探讨
Apr 01 Javascript
js实现的倒计时按钮实例
Jun 24 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
Node.js 文件夹目录结构创建实例代码
Jul 08 Javascript
Javascript this 函数深入详解
Dec 13 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
jquery层次选择器的介绍
Jan 18 jQuery
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 Javascript
node事件循环和process模块实例分析
Feb 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多态的实现详解
2013/06/09 PHP
php调用新浪短链接API的方法
2014/11/08 PHP
两个php日期控制类实例
2014/12/09 PHP
php文件上传的两种实现方法
2016/04/04 PHP
jquery 插件开发备注
2010/08/27 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
2015/03/23 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
python继承和抽象类的实现方法
2015/01/14 Python
python修改操作系统时间的方法
2015/05/18 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
Python中单、双下划线的区别总结
2017/12/01 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
python随机生成库faker库api实例详解
2019/11/28 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
投标担保书范文
2014/04/02 职场文书
幼儿园中班评语大全
2014/04/17 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript
Python Pandas常用函数方法总结
2021/06/15 Python
微信小程序调用python模型
2022/04/21 Python