vue el-table的每行操作el-button添加单独的loading效果实现-编程知识

vue el-table的每行操作el-button添加单独的loading效果实现

- 效果图：
- 实现代码：
- 结语

效果图：

在这里插入图片描述

实现代码：

<tamplate><el-table :data="list" ><el-table-column fixed="right" label="操作" align="left" width="220"><template slot-scope="scope"><!-- 主要设置:loading="scope.row.loading" --><el-buttontype="text"plainsize="small":loading="scope.row.loading"@click="boxConfigSync(scope.row)">同步</el-button></template></el-table-column></el-table>
</tamplate>
<script>methods: {// 获取列表getPage() {const self = thisself.$api.getXXXDevices(self.listQuery).then((response) => {//主要设置//给每一行数据添加loading属性，值设置为falseself.list = response.items.map(res=>{this.$set(res, 'loading', false)return res});})},boxConfigSync(row) {const self = thisrow.loading = true;//主要设置self.$confirm('是否确定?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$api.synXXXXNodes(row.id).then((response)=>{if (response.success) {self.$message({message: '成功！',type: 'success'})row.loading = false;//主要设置} else {row.loading = false;self.$message({type: 'error',message: response.info//主要设置})}}).catch(() => {row.loading = false;//主要设置this.$message({title: "失败",message: "失败",type: "error",duration: 2000});});}).catch(() => {row.loading = false;//主要设置self.$message({type: 'info',message: '已取消'})})},}
</script>