• 关于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中,传到后台


  • 相关阅读:
    删除变长列字段后使用DBCC CLEANTABLE回收空间
    python笔记25-mock-server之moco
    python笔记24-unittest单元测试之mock.patch
    python笔记23-unittest单元测试之mock
    python接口自动化16-multipart/form-data上传图片
    python笔记22-literal_eval函数处理返回json中的单双引号
    初识PCA数据降维
    Android工具包
    Matlab中unifrnd函数使用解析
    Matlab中min/max函数的误解
  • 原文地址:https://www.cnblogs.com/chiang28/p/9889032.html
Copyright © 2020-2023  润新知