element table 点击某一行中按钮加载

在这里插入图片描述
在Element UI中,实现表格(element-table)中的这种功能通常涉及到数据处理和状态管理。当你点击某一行的按钮时,其他行的按钮需要动态地切换为加载状态,这可以通过以下步骤实现:

1.表格组件:使用el-table组件,并且为每一行的按钮添加事件监听器,如@click。

<el-table :data="items" @selection-change="handleSelectionChange">
  <el-table-column type="index"></el-table-column>
  <el-table-column prop="action" label="操作">
    <template slot-scope="scope">
      <el-button v-if="!isLoading[scope.$index]" @click="loadData(scope.$index)" :disabled="isLoading[scope.$index]">加载</el-button>
      <!-- 加载中状态 -->
      <span v-if="isLoading[scope.$index]">加载中...</span>
    </template>
  </el-table-column>
</el-table>
  1. 状态管理:维护一个数组isLoading,用于跟踪每行的数据加载状态。初始设置所有元素为false。
data() {
  return {
    items: [],
    isLoading: Array.from({ length: this.items.length }, () => false),//此处可以放在接口中
  };
},
  1. 加载方法:在loadData方法中,当点击某一行的按钮时,更新对应索引处的状态为true,然后调用实际的数据加载API。同时,可以设置一个异步操作来模拟加载过程,例如使用axios或Promise。
methods: {
  loadData(index) {
    this.isLoading[index] = true; // 设置为加载状态
    this.fetchData(index).then(() => {
      // 调整状态为已完成
      this.isLoading[index] = false;
      //如果没有响应式用下面的设置
       //this.$set(this.isLoading, index, false);
    }).catch(() => {
      // 处理加载失败
    });
  },
  fetchData(index) {
    return new Promise((resolve, reject) => {
      // 模拟异步加载
      setTimeout(() => {
        // 假设这里是你获取数据的逻辑
        this.items[index].dataToLoad = '数据内容';
        
        resolve();
      }, 2000); // 加载时间
    });
  },
},
  1. 选择改变事件:使用@selection-change事件监听用户选择的行,确保只对选中的行执行加载操作。
handleSelectionChange(selection) {
  selection.forEach((index) => {
    this.loadData(index);
  });
},

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

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

相关文章

虹科免拆诊断案例 | 2014 款雪佛兰迈锐宝车驾驶人侧车窗开关无法控制其他车窗升降

故障现象  一辆2014款雪佛兰迈锐宝车&#xff0c;搭载LTD发动机&#xff0c;累计行驶里程约为12万km。车主反映&#xff0c;操作驾驶人侧车窗开关无法控制其他车窗升降&#xff0c;而操作其他车门上的车窗开关可以正常控制相应的车窗升降。 故障诊断  接车后试车&#xff0…

VMware ESXi 8.0U2c macOS Unlocker OEM BIOS ConnectX-3 网卡定制版 (集成驱动版)

VMware ESXi 8.0U2c macOS Unlocker & OEM BIOS ConnectX-3 网卡定制版 (集成驱动版) 发布 ESXi 8.0U2 集成驱动版&#xff0c;在个人电脑上运行企业级工作负载 请访问原文链接&#xff1a;https://sysin.org/blog/vmware-esxi-8-u2-sysin/&#xff0c;查看最新版。原创作…

Qt 非圆角图片裁剪为圆角图片

将Qt非圆角图片裁剪为圆角图片,步骤如下&#xff1a; 1、按照原始图片尺寸定义一张透明的新图形 2、使用画家工具在新图形上绘制一个圆角矩形线路 3、绘制图片 4、使用圆角矩形切割图片边角 封装成函数如下&#xff1a; QPixmap Widget::getRoundedPixmap(const QPixmap srcPix…

第2章 Rust初体验7/8:错误处理时不关心具体错误类型的下划线:提高代码可读性:猜骰子冷热游戏

讲动人的故事,写懂人的代码 2.6.6 用as进行类型转换:显式而简洁的语法 贾克强:“大家在查看Rust代码时,可能会注意到这一句。在这里,如果我们不使用as i32,编译器会报错,因为它在u32中找不到abs()方法。这是因为prev和sum_of_two_dice都是u32类型,u32类型并不支持abs(…

Jmeter接口请求之 :multipart/form-data 参数请求

参考教程 Jmeter压测之&#xff1a;multipart/form-data_jmeter form-data-CSDN博客 1、通过fiddler对接口进行抓取&#xff0c;接口信息如下图所示 2、获取到接口后 在fiddler右侧点击Inspectors-Raw中可以看到如下图所示信息&#xff0c;上半部分为默认请求头信息内容&#…

【Numpy】一文向您详细介绍 np.abs()

【Numpy】一文向您详细介绍 np.abs() 下滑即可查看博客内容 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我静心耕耘深度学习领域、真诚分享知识与智慧的小天地&#xff01;&#x1f387; &#x1f393; 博主简介&#xff1a;985高校的普通本硕&#xff0c;曾…

论文发表CN期刊《高考》是什么级别的刊物?

论文发表CN期刊《高考》是什么级别的刊物&#xff1f; 《高考》是由吉林省长春出版社主管并主办的省级教育类期刊&#xff0c;期刊以科教兴国战略为服务宗旨&#xff0c;专门反映和探索国内外教育教学和科研实践的最新成果。该期刊致力于为广大教育工作者提供一个高质量的学术…

燃气守护神:燃气管网安全运行监测解决方案

在这个智能科技日新月异的时代&#xff0c;燃气安全却时有发生&#xff0c;严重危害人们的生命财产安全&#xff0c;因此旭华智能根据相关政策要求并结合自身优势&#xff0c;打造了一套燃气管网安全运行监测解决方案&#xff0c;他犹如一位“燃气守护神”&#xff0c;悄然守护…

基于安信可串口调试助手软件调试ESP8266串口WIFI模块ESP-01S应用功能

基于安信可串口调试助手软件调试ESP8266串口WIFI模块ESP-01S应用功能 ESP8266_01S引脚功能图ESP8266_01S原理图ESP8266_01S尺寸图检验工作1、USB-TTL串口工具(推荐使用搭载CP2102芯片的安信可USB-T1串口)与ESP8266_01S WiFi模块(推荐使用安信可ESP8266系列模组)接线(注意当…

从零开始的<vue2项目脚手架>搭建:vite+vue2+eslint

前言 为了写 demo 或者研究某些问题&#xff0c;我经常需要新建空项目。每次搭建项目都要从头配置&#xff0c;很麻烦。所以我决定自己搭建一个项目初始化的脚手架&#xff08;取名为 lily-cli&#xff09;。 脚手架&#xff08;scaffolding&#xff09;&#xff1a;创建项目时…

hw面试总结

在这里给大家推荐一个阿里云的活动&#xff0c;可白嫖一年2h4g服务器 活动链接&#xff1a;https://university.aliyun.com/mobile?clubTaskBizsubTask…11404246…10212…&userCodeks0bglxp 一、漏洞分析 1.SQL注入 原理&#xff1a; 当Web应用向后台数据库传递SQL…

企业服务器上云还是下云哪种比较好?-尚云Sunclouds

如今很多中小企业都面临一个艰难的选择&#xff0c;是要选择将服务器迁移至数据中心托管&#xff08;下云&#xff09;或者直接迁移到云端&#xff08;上云&#xff09;。中小企业是社会发展的中坚力量&#xff0c;他们的特点少而明显&#xff1a;资金少&#xff0c;增长快&…

Perl 语言学习进阶

一、如何深入 要深入学习Perl语言的库和框架&#xff0c;可以按照以下步骤进行&#xff1a; 了解Perl的核心模块&#xff1a;Perl有许多核心模块&#xff0c;它们提供了许多常用的功能。了解这些模块的功能和用法是深入学习Perl的第一步。一些常用的核心模块包括&#xff1a;S…

Postman batch post requests import 双引号问题

初次使用工具中注意事项&#xff1a; 1 定义json参数变量value由于没有注意双引号问题导致run 报400 错误 测试结果总是报400 bad request错误

Python数据库编程指南:连接与操作SQLite与MySQL

目录 一、引言 二、SQLite数据库连接与操作 &#xff08;一&#xff09;安装SQLite库 &#xff08;二&#xff09;建立数据库连接 &#xff08;三&#xff09;执行SQL语句 &#xff08;四&#xff09;注意事项 三、MySQL数据库连接与操作 &#xff08;一&#xff09;安…

量化交易实操指南:从模拟回测到实盘交易的全流程揭秘!

什么是量化交易&#xff1f; 量化交易是一种利用数学、统计学和计算机科学方法&#xff0c;通过构建模型和算法来进行交易决策的方式。它的核心思想是通过系统性的分析和处理大量的历史数据、市场信息和交易规则&#xff0c;以发现市场中的规律和模式&#xff0c;并以此为依据…

虚拟化 之三 详解 jailhouse(ARM 平台)的构建过程、配置及使用

嵌入式平台下,由于资源的限制,通常不具备通用性的 Linux 发行版,各大主流厂商都会提供自己的 Linux 发行版。这个发行版通常是基于某个 Linux 发行版构建系统来构建的,而不是全部手动构建,目前主流的 Linux 发行版构建系统是 Linux 基金会开发的 Yocto 构建系统。 基本环…

LabVIEW开发指针式压力仪表图像识别

系统利用LabVIEW编程实现对指针式压力仪表的读取&#xff0c;通过相机、光源、固定支架等硬件捕捉仪表图像&#xff0c;并通过图像识别技术解析压力值。系统分为两个阶段&#xff1a;第一阶段固定相机更换仪表&#xff0c;第二阶段移动相机识别多个固定仪表。本文介绍硬件选择、…

可再生能源的未来——Kompas.ai如何助力绿色发展

引言 在全球气候变化和能源危机的背景下&#xff0c;可再生能源逐渐成为能源发展的重要方向。本文将探讨可再生能源的发展趋势&#xff0c;并介绍Kompas.ai如何通过AI技术助力绿色发展的实现。 可再生能源的发展及其重要性 可再生能源是指通过自然资源产生的能源&#xff0c;…

ubuntu20.04设置共享文件夹

ubuntu20.04设置共享文件夹 一&#xff0c;简介二&#xff0c;操作步骤1&#xff0c;设置Windows下的共享目录2&#xff0c;挂载共享文件夹3&#xff0c;测试是否挂载成功 一&#xff0c;简介 在公司电脑上&#xff0c;使用samba设置共享文件夹&#xff0c;IT安全部门权限不通…