当前位置: 首页 > news >正文

element-ui 表格中带有按钮的loading详细解决方案

最近写项目遇到一个问题就是表格里的按钮加载状态设置,就是表格里的按钮在进行操作时,显示相应的加载状态,操作完成后,恢复正常状态。
在这里插入图片描述

解决思路

  • 方案一:data中设置一个对象,里面放很多个btnloading{ btnLoading1: false, btnLoading2: false,... }
    缺点:不知道会列表里会有多少条数据(鸡肋,不建议采用,本篇文章不再介绍)
  • 方案二:按钮直接设置 v-loading="scope.row.MarkUpPirceLoading"
    可行,建议使用,下面介绍这种解决方案

解决方案

<el-table-column v-if="isStudy === 0" label="操作">
   <template slot-scope="scope">
     <!-- 提醒按钮 -->
     <el-button
       :loading="scope.row.remindLoading"
       icon="el-icon-message-solid"
       size="mini"
       type="primary"
       @click="remind(scope.row)"
     />
   </template>
 </el-table-column>
remind(row) {
  this.$set(row, 'remindLoading', true)
  console.log('remind....')
  setTimeout(() => {
    this.$message.success('提醒成功')
    this.$set(row, 'remindLoading', false)
  }, 2000)
}

大功告成,现在每个按钮点击时都有自己的加载状态了

详解

这里使用了this.$set(row, 'remindLoading', true),对vue不太了解的童鞋可能会感到疑问,这是什么方法?为什么要使用这个方法?直接修改rowremindLoading的值不就好了嘛,即row.remindLoading = true/false

那么我们来看看这样写的话,会怎样?

remind(row) {
  row.remindLoading = true
  console.log('remind....')
  setTimeout(() => {
    this.$message.success('提醒成功')
   	row.remindLoading = false
  }, 2000)
  console.log(row)
}

这样写的话,发现按钮的加载状态并未出现,查看一下控制台输出的row
在这里插入图片描述
属性设置到了 ob 外面,vue监听不到变化,也就是说我们进行改变后dom不会更新

在这里我们发现虽然这个对象身上已经有了remindLoading属性,但是视图层并没有更新该数据,是什么造成的呢?由于受JavaScript的限制,vue.js不能监听对象属性的添加和删除,因为在vue组件初始化的过程中,会调用gettersetter方法,所以该属性必须是存在在data中,视图层才会响应该数据的变化

关于这个问题的解决方案就是使用this.$set(row, 'remindLoading', true),即

remind(row) {
  this.$set(row, 'remindLoading', true)
  console.log('remind....')
  setTimeout(() => {
    this.$message.success('提醒成功')
    this.$set(row, 'remindLoading', false)
  }, 2000)
  console.log(row)
}

在这里插入图片描述
我们发现,通过这这种方式为对象添加属性之后,它的对象身上多了getset方法,所以,此时我们再次操作该属性的时候,就会引起视图的更新啦

相关文章:

  • leetcode:特定深度节点链表(层次遍历)
  • 让docbook支持表格行颜色的渲染
  • 蓝桥杯常用知识点总结
  • Element-ui Radio单选框中label绑定数据类型问题
  • Vue 子组件修改父组件值的解决方法
  • ubuntu 安装笔记
  • 百度富文本编辑器ueditor支持上传mp3格式等音频文件的方法
  • 前端性能优化之vue-cli3 开启gizp压缩及nginx配置
  • 关于php操作http header
  • 力扣 反转链表II
  • 本周技术关注:Awstats、Mrtg、Webalizer How-TO Articles
  • 力扣打卡:有效的字母异同位
  • Hibernate 3.2 SQL函数返回类型从Integer变为Long
  • 浅谈vue中index.html、main.js、App.vue、index.js之前的关系以及加载过程
  • 忠厚开发者与“厚道”甲方II(超级Demo)——CSDN外包实践(38)
  • 5分钟即可掌握的前端高效利器:JavaScript 策略模式
  • Date型的使用
  • Docker: 容器互访的三种方式
  • JavaScript HTML DOM
  • Java多线程(4):使用线程池执行定时任务
  • Java精华积累:初学者都应该搞懂的问题
  • Lucene解析 - 基本概念
  • macOS 中 shell 创建文件夹及文件并 VS Code 打开
  • Mac转Windows的拯救指南
  • mockjs让前端开发独立于后端
  • Python 使用 Tornado 框架实现 WebHook 自动部署 Git 项目
  • Spring Boot MyBatis配置多种数据库
  • 用Node EJS写一个爬虫脚本每天定时给心爱的她发一封暖心邮件
  • 在Mac OS X上安装 Ruby运行环境
  • 如何用纯 CSS 创作一个货车 loader
  • # 安徽锐锋科技IDMS系统简介
  • #QT(一种朴素的计算器实现方法)
  • (附源码)计算机毕业设计SSM保险客户管理系统
  • (论文阅读31/100)Stacked hourglass networks for human pose estimation
  • (全注解开发)学习Spring-MVC的第三天
  • (原創) 未来三学期想要修的课 (日記)
  • (转)EOS中账户、钱包和密钥的关系
  • .NET Standard 的管理策略
  • .net web项目 调用webService
  • /bin/rm: 参数列表过长"的解决办法
  • @AutoConfigurationPackage的使用
  • @EnableWebMvc介绍和使用详细demo
  • @Transaction注解失效的几种场景(附有示例代码)
  • @开发者,一文搞懂什么是 C# 计时器!
  • [ vulhub漏洞复现篇 ] JBOSS AS 5.x/6.x反序列化远程代码执行漏洞CVE-2017-12149
  • [100天算法】-每个元音包含偶数次的最长子字符串(day 53)
  • [2019.3.5]BZOJ1934 [Shoi2007]Vote 善意的投票
  • [android] 请求码和结果码的作用
  • [C++从入门到精通] 14.虚函数、纯虚函数和虚析构(virtual)
  • [Django 0-1] Core.Checks 模块
  • [Golang]K-V存储引擎的学习 从零实现 (RoseDB mini版本)
  • [I2C]I2C通信协议详解(二) --- I2C时序及规格指引
  • [IDF]摩斯密码
  • [JavaWeb]—前端篇
  • [linux] Key is stored in legacy trusted.gpg keyring