给el-table里面的按钮添加独立的loading效果

77 阅读 0 评论 51 点赞

我是靠谱客的博主稳重发夹，最近开发中收集的这篇文章主要介绍给el-table里面的按钮添加独立的loading效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

如图所示，需要在点击某一条数据的“查看”后，对应的状态变为loading。
在这里插入图片描述
一开始我直接在button标签添加 :loading=‘btnLoading’ 点击之后把变量btnLoading变为true，发现这个方法有问题，会把其他行的“查看”全部变成loading。
解决思路：重新处理一下数据，为每条数据添加btnLoading属性，默认值为false（属性名可以自定义，不一定非要是btnLoading），点击改变对应的btnLoading值就可以了。代码如下：


<el-table-column
        label="操作"
        fixed="right"
        width="240">
   <template slot-scope="scope">
      <el-button type="primary" size="mini"  icon="el-icon-view seeMore" :loading="scope.row.btnLoading" @click="clickSeeMore(scope.row)">查看</el-button>
      <el-button @click="handleClickUnlock1(scope.row)" type="primary" size="mini">解锁</el-button>
      <el-button @click="handleClickEnter1(scope.row)" type="primary" size="mini">进入</el-button>
   </template>
</el-table-column>

for (var i in res.content.data) { //这个for循环加在查询出数据结果的后面
    res.content.data[i].btnLoading=false
}

clickSeeMore(row){
    row.btnLoading=true;
    ...
    row.btnLoading=false;
}