elemnetUI 关于el-button禁用属性的小坑

使用cdn引入elementui的页面中,对el-table头部的自定义中使用了el-button因为做的是个刷新表格的功能,所以我想在点击以后给按钮设置disabled:true 防止短时间触发多次,结果一直不能实现

• 这是我页面样式
  
• 这是我的el-table自定义表头的代码
  只复制了按钮定义那部分的

 <el-table-column fixed="right" align="center" width="210"> 
  <template slot="header"> 
   <el-row type="flex" align="middle"> 
    <el-col :span="6" :offset="6">
     操作
    </el-col> 
    <el-col :span="6" :offset="6"> 
     <el-button icon="el-icon-refresh" type="text" :loading="refreshBookBTLoading" @click="refreshBookListHandle"></el-button> 
    </el-col> 
   </el-row> 
  </template> 
  <template slot-scope="scope"> 
   <el-button @click="bookListRowClickHandle(scope.row)" type="text" size="small">
     查看详情 
   </el-button> 
   <!-- v-if="scope.row.state == 'STORE'"--> 
   <el-button v-if="scope.row.state == 'STORE'" @click="createBorrowHandle(scope.row)" type="text" size="small">
     登记借阅 
   </el-button> 
  </template> 
 </el-table-column>

• 这是点击刷新(那个刷新小图标)时触发的函数

// 刷新数据
refreshBookListHandle(ev) {
   // 防止按键连点
   this.refreshBookBTLoading = true;
   console.log(this);
   setTimeout(() = >{
       this.refreshBookBTLoading = false;
   },
   3000);

   this.reqBookList().then((res) = >{
       if (res) {
           this.$message({
               message: '刷新成功',
               type: 'success',
               duration: 1000,
           });
       }
   })

}

结果死活不进入loading状态,本来用的disabled也不行,改成loading还是不行

• 这是我在另外一个界面使用的效果,没有放el-form里,结果就可以正常的进入loading状态
  
  我不理解,求解决方案,我感觉只能强行把这个按钮移到表格外面了,艹
• 刚刚把按钮移到了表单下面分页的那个地方,又可以用loading初步判断是el-table这个位置的坑,改了好久,只能先这样了.