关于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 ...
随机推荐
- java获得两个日期之间的所有月份
private static List<String> getMonthBetween(String minDate, String maxDate) throws ParseExcept ...
- 搭建Firekylin博客
搭建步骤 1).安装 Node.js curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash - yum - ...
- 【Thinking in Java, 4e】访问权限控制
[包:库单元] 编译单元的概念. 一个.java文件就是一个编译单元,一个编译单元只能有一个public类,编译单元中的非public类一般是用于为public类提供支持的,这些类在包外不可见. im ...
- Windows打开软件老是弹出无法验证发布者
使用组策略管理器 gpedit.msc 用户配置-管理模板-Windows组件-附件管理器-中等风险文件类型的包含列表 .exe;.cmd;.bat;.js即可
- 20145103JAVA第二次实验报告
实验二 Java面向对象程序设计 实验内容 1.初步掌握单元测试和TDD 2.理解并掌握面向对象三要素:封装.继承.多态 3.初步掌握UML建模 4.熟悉S.O.L.I.D原则 5.了解设计模式 实验 ...
- 20145310《Java程序设计》第3周学习总结
20145310 <Java程序设计>第3周学习总结 教材学习内容总结 本周学习内容比较多,主要是第四第五章的学习. 第四章 类与对象 类是对象的设计图,对象是类的实例. 类(Class) ...
- 20145321 《Java程序设计》第7周学习总结
20145321 <Java程序设计>第7周学习总结 教材学习内容总结 第十三章 时间与日期 13.1 认识时间与日期 1.格林威治时间(GMT) 观察太阳得来 2.世界时(UT) 3.国 ...
- 开发人员不可不看的 OBD通讯协议知识
OBD-II Network Standards» J1850 VPW– Adopted by GM; also known as Class 2.– Adopted by Chrysler (kno ...
- spring MVC Action里面怎么设置UTF-8编码集
/* 编码转换,确保写数据库的时候不会出现乱码 */ public class CodingConvert{ public CodingConvert(){ // } public String to ...
- MR案例:分区和排序
现有一学生成绩数据,格式如下:<学号,姓名,学院,成绩> //<id, name, institute, grade>. 需求描述:查询成绩大于等于60分的学生数据,按学院分 ...