关于vue+element-ui的table多选禁用某个按钮

Posted 2021-01-16 Java偷走了我的微笑

在我做的项目中，有这样一个需求：当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中，传到后台