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

Love The Way You Lie 2023-06-14 04:17 1阅读 0赞

如图所示，需要在点击某一条数据的“查看”后，对应的状态变为loading。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70]  
一开始我直接在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;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191118143613332.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw==,size_16,color_FFFFFF,t_70