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

news2024/11/16 15:43:47

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-button
             type="text"
             plain
             size="small"
             :loading="scope.row.loading"
             @click="boxConfigSync(scope.row)"
           >同步</el-button>
         </template>
       </el-table-column>
     </el-table>
</tamplate>
<script>
     methods: {
	   // 获取列表
	    getPage() {
	      const self = this
	      self.$api.getXXXDevices(self.listQuery)
	        .then((response) => {
	          //主要设置
	          //给每一行数据添加loading属性,值设置为false
	          self.list = response.items.map(res=>{
	            this.$set(res, 'loading', false)
	            return res
	          });
	        })
	    },
	    boxConfigSync(row) {
	      const self = this
	      row.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>

实现就这么简单,一目了然。

结语

你的压力来源于无法自律,只是假装努力,现状跟不上内心的欲望,所以你焦虑又恐惧。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/730721.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Application Context的继承关系

Application Context他们关系很复杂&#xff0c;紫色是借口&#xff0c;浅绿色是抽象类&#xff0c;我们要创建继承&#xff0c;要创建实现。第一个class path代表未加载路径&#xff0c;rouces下都是未加载路径.FileSystem代表文件系统&#xff0c;代表则磁盘。 看看文件怎么写…

Gof23设计模式之装饰者模式

1.概述 定义 指在不改变现有对象结构的情况下&#xff0c;动态地给对象增加一些职责&#xff08;即增加其额外功能&#xff09;的模式。 例子 我们先来看一个快餐店的例子。 快餐店有炒面、炒饭这些快餐&#xff0c;可以额外附加鸡蛋、火腿、培根这些配菜&#xff0c;当然加…

抖音seo矩阵源码*开发搭建*代码打包部署(开源)分享

1一、 抖音seo矩阵源码开发搭建&#xff08;支持二开&#xff09;概述 抖音SEO矩阵指的是一系列通过搜索引擎优化&#xff08;SEO&#xff09;技术和策略来提升抖音账号在搜索结果中排名的方法和工具。在抖音上&#xff0c;用户可以通过搜索关键词来查找与其相关的视频和账号…

网络子系统1

网络子系统 1 ISO/OSI和TCP/IP参考模型 国际标准化组织&#xff09;设计了一种参考模型&#xff0c;定义了组成网络的各个层。该模型由7层组成&#xff0c;称为OSI&#xff08;Open Systems Interconnection&#xff0c;开放系统互连&#xff09;模型&#xff0c;如图所示。其…

Android耗电优化需要注意的要点

作者&#xff1a;小墙程序员 在应用开发中&#xff0c;耗电是我们需要关注的重点。但是&#xff0c;开始进行耗电优化时&#xff0c;我们常常感到无从下手。这篇文章将介绍耗电优化的相关要点&#xff0c;让我们优化时有一个方向。 传感器 大多数Android设备都内置传感器&…

【停用词】NLP中的停用词怎么获取?我整理了6种方法

文章目录 一、停用词介绍二、停用词应用场景2.1 提取高频词2.2 词云图 三、停用词获取方法3.1 自定义停用词3.2 用wordcloud调取停用词3.3 用nltk调取停用词3.3.1 nltk中文停用词3.3.2 nltk英文停用词 3.4 用sklearn调取停用词3.5 用gensim调取停用词3.6 用spacy调取停用词 一、…

select语句与CSP模型~Go进阶

select语句 select 是 Go 中的一个控制结构。select 语句类似于 switch 语句&#xff0c;但是select会随机执行一个可运行的case。如果没有case可运行&#xff0c;它将阻塞&#xff0c;直到有case可运行。 语法结构 select语句的语法结构和switch语句很相似&#xff0c;也有…

【UGUI学习笔记】Rect Transform

文章目录 Rect Transform锚点和轴心轴心点锚点 Rect Transform 锚点和轴心 在上图中&#xff0c;中心位置的蓝色同心圆代表了轴心点&#xff0c;而四角花瓣的图形代表了实体的锚点。 Attribute含义轴心点 Pivot默认实体的几何中心处&#xff0c;轴心代表了对物体在空间上的坐…

安装git工具

下载安装地址&#xff1a; Git - Downloading Package (git-scm.com) 命令安装&#xff1a;创建文件夹下载路径 启动powershell 输入命令&#xff1a;winget install --id Git.Git -e --source winget 等待下载安装

集合面试题--ArrayList数组

介绍数组 数组&#xff08;Array&#xff09;是一种用连续的内存空间存储相同数据类型数据的线性数据结构。数组&#xff08;Array&#xff09;是一种用连续的内存空间存储相同数据类型数据的线性数据结构。 因为int占4个字节&#xff0c;所以也可以理解为占四块内存 数组如何…

600多个人工智能AI工具汇总,资源、教程和讲解免费提供(第二讲)

这里是600多个人工智能AI工具汇总第二讲&#xff0c;每天介绍5个&#xff0c;文章最后会告诉大家获取方式的。现在请大家同我一起进入AIGC的世界。 第一个&#xff1a;Leonardo.Ai&#xff0c;用来创造力、革新为你的创意项目生成质量的资产AI-driven速度和style-consistency。…

代码安全审计

什么是代码安全审计 代码安全审计是指有开发和安全经验的人员,通过阅读开发文档和源代码,以自动化分析工具或者人工分析为手段,对应用程序进行深入分析,高效全面的发现系统代码的编码缺陷以及开发人员不安全的编程习惯,并指导开发人员进行修复,保障应用系统的安全运行。 …

Spring Boot 中的任务调度器是什么,如何使用?

Spring Boot 中的任务调度器是什么&#xff0c;如何使用&#xff1f; 介绍 在开发企业级应用程序时&#xff0c;经常需要执行定时任务或周期性任务。这些任务可以包括清理临时文件&#xff0c;备份数据库&#xff0c;发送电子邮件等等。Spring Boot 提供了一个内置的任务调度…

基于STM32的homeassistant(采用FreeRTOS操作系统)【第一章:设备配网、连接服务器、断网重连、断服务器重接】

第一章开发环境&#xff1a; 主控STM32F103C8T6WIFI模块ESP01S开发语言C开发编译器 KEIL 组网方式WIFI服务器协议MQTT 本章要点&#xff1a; ESP01S的AT指令配网以及服务器连接STM32与ESP01S的usart协议通信断网重连以及断服务器重连STM32向服务器端口发送对应指令 抽象理解…

硬件电路设计--运算放大器(二)选型

文章目录 前言一、运算放大器的工艺决定Vos和Ib二、TI放大器的命名规律三、选型总结 前言 一、运算放大器的工艺决定Vos和Ib 运放的设计工艺对其各种指标有非常重要的影响 常常有三种基本工艺&#xff1a; Bipolar: 低输入阻抗&#xff0c;Ib1-100nA:Vos10-100uV,低至0.1uV/o…

惊艳!全网首份“架构师成长笔记”GitHub狂澜9000星

其实架构师是需要一个相对而言对架构师友善的环境。第一&#xff0c;架构师到底需要什么&#xff1f;一个架构师要成长&#xff0c;首先他需要信任&#xff0c;第二他需要授权&#xff0c;第三他需要时间&#xff0c;第四他需要资源&#xff0c;少一样都很难开展工作。如果一个…

NIO-Selector 网络编程

目录 一、阻塞 & 非阻塞 1、阻塞 2、非阻塞 二、selector 1、连接和读取 2、处理客户端断开 3、处理消息的边界 4、ByteBuffer大小分配 三、多线程优化 四、NIO vs BIO 1、stream vs channnel 2、IO模型 阻塞IO 非阻塞IO 多路复用 异步IO模型 一、阻塞 &am…

使用OpenCV检测两张图片的关键点并计算关键点的描述子

#include <iostream> #include <opencv2/core/core.hpp> #include <opencv2/features2d/features2d.hpp> #include <opencv2/highgui/highgui.hpp>

每日一博 - 探索代码世界的地图 code iris

文章目录 地址特性安装 code iris如何使用 地址 https://plugins.jetbrains.com/plugin/7324-code-iris 特性 This plugin visualizes the modules, packages and classes of your project. It’s like a UML based “Google Maps” for your Source Code. Code Iris does…

zabbix代理服务器,高可用,监控java,windows,SNMP

zabbix 一&#xff1a;代理服务器1.设置 zabbix 的下载源&#xff0c;安装 zabbix-proxy2.部署数据库&#xff0c;要求 MySQL 5.7 或 Mariadb 10.5 及以上版本2.1.初始化数据库2.2.创建数据库并指定字符集2.3.创建 zabbix 数据库用户并授权 3.导入数据库信息4.修改 zabbix-prox…