Vue+element,将状态记在行内隔离每一行的状态&行为

需求: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>