zoukankan      html  css  js  c++  java
  • 关于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=" 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中,传到后台


  • 相关阅读:
    BladeX部署说明(win7)
    vmware安装gho系统(win10上安装虚拟机然后在vmware上安装win7)
    Windows下mysql忘记root密码的解决方法
    三星(SAMSUNG)910S3L-K04 安装win7的BIOS设置
    delphi7 编译程序时报win32.indcu.a病毒的解决方法
    无法远程到2008R2的解决方法
    触发器学习
    centos6.5安装mongodb2.6
    02_Linux学习_命令
    C#逻辑面试题汇总【不断更新中】
  • 原文地址:https://www.cnblogs.com/chiang28/p/9889032.html
Copyright © 2011-2022 走看看