在我做的项目中,有这样一个需求:当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多选禁用某个按钮的更多相关文章

  1. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  2. vue + element ui 表格自定义表头,提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  3. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  4. 分享一个自搭的框架,使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  5. Vue + Element UI 实现权限管理系统

    Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html

  6. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  7. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  8. vue+element ui 的tab 动态增减,切换时提示用户是否切换

    前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui  有一个 bug,这里记录一下如何实现.转载 ...

  9. 基于 vue+element ui 的cdn网站(多页面,都是各种demo)

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

随机推荐

  1. 【Android】WebView读取本地图片

    背景 咱的博客园APP,是通过一个WebView来展示新闻的详情的.新闻必然是图文并茂的,无论是支持离线缓存还是加速新闻的打开速度, 都需要咱们打通本地存储与WebView之间的桥梁. 思路 1:首先 ...

  2. Java设计模式之模板方法模式(Template Method)

    一.含义 定义一个算法中的操作框架,而将一些步骤延迟到子类中.使得子类可以不改变算法的结构即可重定义该算法的某些特定步骤,不同的子类可以以不同的方式实现这些抽象方法,从而对剩余的逻辑有不同的实现. 二 ...

  3. C++之MFC基本设置

    1 设置单元格的值 1) 选中指定单元格,使用SetValue设置值 CellName.Format(_T("A%d"),i);//单元格的名称 range.AttachDispa ...

  4. 20145307第十周JAVA学习报告

    教材学习内容总结 Java的网络编程 1.计算机网络概述 (1)路由器和交换机组成了核心的计算机网络,计算机只是这个网络上的节点以及控制等,通过光纤.网线等连接将设备连接起来,从而形成了一张巨大的计算 ...

  5. 20145231熊梓宏 《网络对抗》 Bof逆向基础.shellcode注入

    20145231网络对抗<逆向及Bof基础>shellcode注入 实验目的与要求 1.本次实践的对象是一个名为pwn1的linux可执行文件. 2.若该程序正常执行,则main函数会调用 ...

  6. 起源游戏临时实体(Temp Entity)

    如何查看实体 https://wiki.alliedmods.net/Temp_Entity_Lists_(Source) 这里是部分游戏的临时实体列表 # 还可以通过在游戏内输入来获取游戏的临时实体 ...

  7. 定制Writable类

    以IntWritable为例介绍,定制writable的步骤 //继承 WritableComparable接口(继承了writable接口和comparable接口) public class In ...

  8. ubuntu 18.04在更新软件库时出现E: Release file for http://security.ubuntu.com/ubuntu/dists/bionic-security/InRelease is not valid yet...

    1.完整的错误信息如下: E: Release file for http://security.ubuntu.com/ubuntu/dists/bionic-security/InRelease i ...

  9. SVN错误:Failed to load JavaHL Library

    环境:jdk1.7(64bit),eclipse4.4(64bit),SVN1.10.3 问题:在利用subclipse同步资源时,报出错误提示 Failed to load JavaHL Libra ...

  10. kill me heal me的链接

    bilibili上的链接被和谐了,坑爹 韩剧网可以看,不过貌似不太清晰 http://www.hanjuwang.com/play/2015/1851.html 池城治愈营 http://www.bi ...