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-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.mfbz.cn/a/35501.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

服务负载均衡Ribbon

服务负载均衡Ribbon Ribbon 介绍Ribbon 案例Ribbon 负载均衡策略Ribbon 负载均衡算法设置自定义负载均衡算法 Ribbon 介绍 Ribbon 是一个的客服端负载均衡工具&#xff0c;它是基于 Netflix Ribbon 实现的。它不像 Spring Cloud 服务注册中心、配置中心、API 网关那样独立部署…

启动网站调试提示 HTTP 错误 403.14 – Forbidden Web 服务器被配置为不列出此目录的内容。

启动网站调试提示 HTTP 错误 403.14 – Forbidden Web 服务器被配置为不列出此目录的内容。 解决方案第一种.在网站的配置文件里添加第二种.ISS管理界面修改 解决方案 第一种.在网站的配置文件里添加 <system.webServer><directoryBrowse enabled"true" /&…

STM32+PWM+输入捕获测频

外部时钟&#xff0c;主频64M 定时器1 通道1发出PWM波 频率1K 定时器2 通道1输入捕获&#xff0c;上升沿触发 串口 /* USER CODE BEGIN 0 */ uint32_t time_up_num0;//上升沿计数 float time_frequency;//频率 /* USER CODE END 0 */ 初始换打开定时器 /* USER CODE BEGIN 2 …

跑深度学习nvidia驱动忽然实效的详细解决方法

由于经常跑深度学习&#xff0c;所以对于显卡驱动什么的都还是整的比较明白的不含糊&#xff0c;所以都能跑的起来。但是今天跑pytorch框架时&#xff08;用到cuda&#xff09;忽然给我报了个错&#xff1a; RuntimeError: No CUDA GPUs are available这给我整不会了&#xff…

解决uni-app微信小程序底部输入框,键盘弹起时页面整体上移问题

存在问题 做了一个记录页面&#xff08;类似单方聊天页&#xff09;&#xff0c;输入框在底部&#xff1b;当弹出键盘时&#xff0c;页面整体上移&#xff0c;页面头信息会消失不见 需要实现效果&#xff1a; 比如一个记录页面&#xff0c;需要在键盘弹出时&#xff1a; 底…

【SQL】群辉 NAS 安装 Mysql 远程访问连接

群辉安装MySQL具有高效、安全、可靠、灵活等优势&#xff0c;可以为用户提供一个优秀的数据管理和分析环境。同时具有良好的硬件性能和稳定性&#xff0c;可以保障MySQL数据库的高效运行和数据安全. cpolar 是一款内网穿透工具,通过简单的设置,我们即可实现远程访问群辉中mysq…

微信为什么使用 SQLite 保存聊天记录?

概要 SQLite 是一个被大家低估的数据库&#xff0c;但有些人认为它是一个不适合生产环境使用的玩具数据库。事实上&#xff0c;SQLite 是一个非常可靠的数据库&#xff0c;它可以处理 TB 级的数据&#xff0c;但它没有网络层。接下来&#xff0c;本文将与大家共同探讨 SQLite 在…

Element+Vue+OpenLayers的项目实战

WebGIS ElementVueOpenLayers的项目实战 使用npm配置开发环境Vue的安装npm安装vue-cli脚手架构建工具安装桥接工具运行项目 使用npm配置开发环境 开发是项目级别的&#xff0c;则需要使用npm来配置开发环境&#xff1b; 使用npm配置开发环境主要包括Vue、Element和OpenLayers的…

Linux·图解Linux网络包接收过程

因为要对百万、千万、甚至是过亿的用户提供各种网络服务&#xff0c;所以在一线互联网企业里面试和晋升后端开发同学的其中一个重点要求就是要能支撑高并发&#xff0c;要理解性能开销&#xff0c;会进行性能优化。而很多时候&#xff0c;如果你对Linux底层的理解不深的话&…

ContOS7 Oracle11g 安装配置

挂载镜像和配置本地yum源 mount /dev/cdrom /mnt cat <<EOF>/etc/yum.repos.d/local.repo [local] namelocal baseurlfile:///mnt gpgcheck0 enabled1 EOFSelinux配置 #selinux修改后需要重启主机生效&#xff1a; sed -i s/SELINUXenforcing/SELINUXdisabled/g /et…

python dataframe 时间格式处理

1&#xff0c;20230101 这种处理成 2023-01-01 这种 df1[apply_date] df1[apply_date].astype(str) df1[apply_dt] pd.to_datetime(df1[apply_date]).dt.strftime(%Y-%m-%d) 2、时间&#xff0c;截取年月日 如 &#xff1a;2023-01-01 12:01:01 &#xff0c;只取年月日 df[…

java中地址问题

//第一个大mapMap<String, Object> map new HashMap<>();HashMap<String, String> map2 new HashMap<>();map2.put("358","999");//给小map赋值并将其添加到map中map.put("666",map2);//获取小map并且修改对应的键值对…

基于springboot+vue框架的电影订票系统_wqc3k

随着网络科技的不断发展以及人们经济水平的逐步提高&#xff0c;计算机如今已成为人们生活中不可缺少的一部分&#xff0c;为电影订票方便管理&#xff0c;基于java技术设计与实现了一款简洁、轻便的管理系统。本系统解决了电影订票事务中的主要问题&#xff0c;包括个人中心、…

uniapp小程序订单页面UI

前言 之前用模板写了订单页面&#xff0c;由于需求改了导致这个页面做更新麻烦&#xff0c;弄了一下午&#xff0c;索性全部删除了自己写了&#xff0c;上面的tabs用的是b-ui框架写的&#xff0c;其他的都是原生写法。 &#x1f64f;如果这篇文章对你有帮助还请收藏点赞关注&…

Android Studio 和 Android Gradle 插件的已知问题

Android Studio 的已知问题 渲染 Compose 预览时出错 从 Android Studio Chipmunk 开始&#xff0c;如果您在问题面板中看到 java.lang.NoSuchFieldError: view_tree_saved_state_registry_owner 或 java.lang.ClassNotFoundException: androidx.savedstate.R$id&#xff0c;…

OpenCV库进行图像旋转、仿射变换和透视变换

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

SpringBoot教学补充资料3-Maven安装

Maven下载地址&#xff1a;https://maven.apache.org/download.cgi 下载后进行解压&#xff0c;记住解压路径。 mvn -v

文件共享平台Pingvin Share

本文完成于 2 月上旬。最近正好应网友要求折腾了 ClamAV&#xff0c;所以翻出来一起发了&#xff0c;可以作为 ClamAV 的一个应用示例&#xff1b; 什么是 Pingvin Share &#xff1f; Pingvin Share 是自托管文件共享平台&#xff0c;是 WeTransfer 的替代品。使用 Pingvin Sh…

IP 协议的相关特性

目录 IP协议有三大特点&#xff1a;无连接、无状态、不可靠。 四位版本号 四位头部长度 八位服务类型: 十六位总长度 16 位标识, 3 位标志, 13 位片偏移 八位生存时间 八位协议 十六位首部校验和 关于IP v4地址不够的问题 ip地址动态分配: ip地址转换(NAT) 数据传输…

文心一言 VS 讯飞星火 VS chatgpt (54)-- 算法导论6.2 6题

文心一言 VS 讯飞星火 VS chatgpt &#xff08;53&#xff09;-- 算法导论6.2 5题 六、证明:对一个大小为 n的堆&#xff0c;MAX-HEAPIFY 的最坏情况运行时间为 Ω(Ign)。(提示对于n个结点的堆&#xff0c;可以通过对每个结点设定恰当的值&#xff0c;使得从根结点到叶结点路径…
最新文章