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 onpropertychange输入框 事件获取属性
Mar 26 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 Javascript
javascript self对象使用详解
Oct 18 Javascript
Bootstrap和Java分页实例第一篇
Dec 23 Javascript
Vue关于数据绑定出错解决办法
May 15 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
angular4自定义表单控件[(ngModel)]的实现
Nov 23 Javascript
webpack是如何实现模块化加载的方法
Nov 06 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 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/07/20 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
jQuery 各种浏览器下获得日期区别
2008/12/22 Javascript
js 设置选中行的样式的实现代码
2010/05/24 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
js常用正则表达式集锦
2019/05/17 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
Python 面向对象部分知识点小结
2020/03/09 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
公司培训欢迎词
2014/01/10 职场文书
八年级物理教学反思
2014/01/19 职场文书
服务员岗位职责
2014/01/29 职场文书
大二学生职业生涯规划书
2014/02/05 职场文书
遥感技术与仪器求职信
2014/02/22 职场文书
标准单位租车协议书
2014/09/23 职场文书
会计工作岗位职责
2015/02/03 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
求职自我评价参考范文
2019/05/16 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers