需求:table每一行的數(shù)據(jù)單獨點擊可以刷新,彼此之間刷新數(shù)據(jù)不受影響
思路:將每一行的刷新狀態(tài)記在行內(nèi),通過tableList的下標index進行標記
代碼:
- tableData賦值時 通過擴展字段給tableList的每一個子項添加一個初始狀態(tài),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>
