需求:table每一行的数据单独点击可以刷新,彼此之间刷新数据不受影响
思路:将每一行的刷新状态记在行内,通过tableList的下标index进行标记
代码:
- tableData赋值时 通过扩展字段给tableList的每一个子项添加一个初始状态,loading: false
this.tableData = res.data.versionInfoList.map((data) => ({ ...data, loading: false }));
- 刷新
refreshCoverage(index, id) {
//点击刷新便开始loading
this.tableData[index].loading = true;
.....
//接口请求成功后重置loading
this.tableData[index].loading = false;
}
- template传值
<i class="el-icon-refresh de_refresh black_refresh"
:class="{ refreshActive: scope.row.loading }"
@click="refreshCoverage(scope.$index, scope.row.version_id)"></i>
