关于vue+element-ui的table多选禁用某个按钮
在我做的项目中,有这样一个需求:当table多选没有勾选数据的时候禁用掉导出按钮
效果如图:

当选择一个时候可以导出这行的数据
在按钮定义 :disabled="selected.length==0"
<el-button type="primary" :disabled="selected.length==0" @click="exportExcel" size="small" icon="el-icon-download">导出</el-button>
在table上定义 @selection-change="tableSelectionChange"
<el-table :data="pageData[0].currentData" :row-key="getRowKeys" border ref="appDataRef" size="small"
max-height="573" style="width: 100%" @row-click="clickRow" @select-all="selectAll"
@select="selectCheck" @selection-change="tableSelectionChange">
在data return 定义
selectIndex: [],//table勾选存放用户
selected:[],
在 methods定义
tableSelectionChange(val) {
this.selected = val;
},
//全选触发
selectAll(selection) {
if (selection.length != 0) {
for (let i = 0; i < selection.length; i++) {
this.selectIndex[i] = selection[i].userId;
}
} else {
this.selectIndex = [];
}
},
//选中触发
selectCheck(selection, row) {
for (var i = 0; i < this.selectIndex.length + 1; i++) {
if (this.selectIndex.length < selection.length) {
this.selectIndex[this.selectIndex.length] = row.userId;
break;
} else if (this.selectIndex.length > selection.length) {
if (this.selectIndex[i] == row.userId) {
this.selectIndex.splice(i, 1);
break;
}
}
}
}
tableSelectionChange这个方法是控制按钮禁用
selectAll和selectCheck是把选中的列userId存到selectIndex中,传到后台
关于vue+element-ui的table多选禁用某个按钮的更多相关文章
- Vue+element ui table 导出到excel
需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...
- vue + element ui 表格自定义表头,提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- 分享一个自搭的框架,使用Spring boot+Vue+Element UI
废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...
- Vue + Element UI 实现权限管理系统
Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html
- vue + element ui 实现实现动态渲染表格
前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...
- vue+element ui 的上传文件使用组件
前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...
- vue+element ui 的tab 动态增减,切换时提示用户是否切换
前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui 有一个 bug,这里记录一下如何实现.转载 ...
- 基于 vue+element ui 的cdn网站(多页面,都是各种demo)
前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...
随机推荐
- LinQ高级查询、组合查询、IQueryable集合类型
LinQ高级查询: 1.模糊查询(包含) Repeater1.DataSource = con.car.Where(r =>r.name.Contains(s)).ToList(); 2.开头 ...
- ES6 利用 Set 数组去重法
例子: const set = new Set(); [2, 3, 5, 4, 5, 2, 2].forEach(x => set.add(x) ); const arr = [...set]; ...
- Tomcat之并发优化
1.位置: (1)/opt/tomcat7/conf下的server.xml文件中<Connector>节点的配置优化,记得先备份. (2)出厂默认(在server.x ...
- Python实例1—格式化输出
老男孩教学学习笔记: 实例1:格式化输出 # Author:Alex Li name = input("name:") # raw_input 2.x input 3.x # in ...
- 20145240《网络对抗》MSF基础应用
MSF基础应用 一个主动攻击,如ms08_067 启动msf search ms08_067,查找相应的漏洞,查询可攻击的模块. 根据上述漏洞的模块use exploit/windows/smb/ms ...
- Jquery14 工具函数
学习要点: 1.字符串操作 2.数组和对象操作 3.测试操作 4.URL 操作 5.浏览器检测 6.其他操作 工具函数是指直接依附于 jQuery 对象,针对 jQuery 对象本身定义的方法,即全局 ...
- JAVA基础补漏--文件读取
public class Test2 { public static void main(String[] args) throws IOException { FileInputStream fis ...
- mysql类似递归的一种操作进行层级查询
select device_id,device_type,COUNT(1) count from ( select t1.device_id,t1.device_type,DATE_SUB(t1.re ...
- 提高ubuntu系统性能的小技巧
在UBUNTU系统里面,并不是你的物理内存全部耗尽之后,系统才使用swap分区!系统的swappiness设定值,对如何使用swap分区是有着很大的联系,并不是当swappiness=0的时候就不使用 ...
- Scrapy之Scrapy shell
Scrapy Shell Scrapy终端是一个交互终端,我们可以在未启动spider的情况下尝试及调试代码,也可以用来测试XPath或CSS表达式,查看他们的工作方式,方便我们爬取的网页中提取的数据 ...