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

el-table通过scope.row获取表格每列的值,以及scope.$index

      <el-table-column type="selection" width="55"></el-table-column><el-table-column prop="id" label="ID" width="80"></el-table-column><el-table-column prop="name" label="文件名称"></el-table-column><el-table-column prop="type" label="文件类型"></el-table-column><el-table-column prop="size" label="文件大小(kb)"></el-table-column><el-table-column label="下载"><template slot-scope="scope"><el-button type="primary" @click="download(scope.row.url)">下载</el-button></template></el-table-column><el-table-column label="启用"><template slot-scope="scope"><el-switch v-model="scope.row.enable" active-color="#13ce66" inactive-color="#ccc" @change="changeEnable(scope.row)"></el-switch></template></el-table-column><el-table-column label="操作"  width="200" align="center"><template slot-scope="scope"><el-popconfirmclass="ml-5"confirm-button-text='确定'cancel-button-text='我再想想'icon="el-icon-info"icon-color="red"title="您确定删除吗?"@confirm="del(scope.row.id)"><el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button></el-popconfirm></template></el-table-column></el-table>
---------------------------------------------------------------------------------data() {return {tableData: [],}}
---------------------------------------------------------------------------------
load() {this.request.get("/file/page", {params: {pageNum: this.pageNum,pageSize: this.pageSize,name: this.name,}}).then(res => {this.tableData = res.data.recordsthis.total = res.data.total})

如上所示,scope.row是一个双向绑定的过程,当前行数据的获取也会用到插槽,scope相当于一行的数据, scope.row相当于当前行的数据对象。我们这里的scope绑定到了tableData。tableData在通过res.data.records调用返回值拿到后台数据库的数据,这样scope.row就会显示数据库对应条目数据,也可以进行传值到后端进行修改。

label是显示的文字

prop是对应获取数据的属性名

scope.row.xxx是获取相对应的一个表格中的数据

scope.$index是获取这一行的索引

注意:

①一定要用template包裹着才可以

②scope.row是获取这一行数据,scope.row.xxx是获取相对应的一个表格中的数据

③scope.$index是获取这一行的索引

相关文章:

el-table通过scope.row获取表格每列的值,以及scope.$index

<el-table-column type"selection" width"55"></el-table-column><el-table-column prop"id" label"ID" width"80"></el-table-column><el-table-column prop"name" label"文件名…...

uni-app:本地缓存的使用

uni-app 提供了多种方法用于本地缓存的操作。下面是一些常用的 uni-app 本地缓存方法&#xff1a; uni.setStorageSync(key, data): 同步方式将数据存储到本地缓存中&#xff0c;可以使用对应的 key 来获取该数据。 uni.setStorage({key, data}): 异步方式将数据存储到本地缓存…...

在Scrum敏捷开发中,开发人员(Developers)的职责

在Scrum敏捷开发中&#xff0c;开发人员&#xff08;Developers&#xff09;是Scrum团队中最重要的角色之一&#xff0c;负责产品的开发和交付&#xff0c;其重要性不言而喻。 那开发人员的职责和需要参加的活动是什么呢&#xff1f; Developers核心职责&#xff1a; 承诺并完…...

SOLIDWORKS® 2024 新功能 - 3D CAD

1、 先前版本的兼容性 • 利用您订阅的 SOLIDWORKS&#xff0c;可将您的 SOLIDWORKS 设计作品保存为旧版本&#xff0c;与使用旧版本 SOLIDWORKS 的供应商无缝协作。 • 可将零件、装配体和工程图保存为新版本前两年之内的SOLIDWORKS 版本。 优点&#xff1a; 即使其他用户正…...

系统架构设计:20 论软件需求管理

目录 一 需求工程 1 需求开发 1.1 需求获取 1.1.1 软件需求的分类 1.1.2 需求获取方法...

K8S云计算系列-(2)

1.Kubernetes平台配置实战 部署Kubernetes云计算平台&#xff0c;至少准备两台服务器&#xff0c;服务器CPU至少2C&#xff0c;内存4G&#xff0c;环境如下所示&#xff1a; Kubernetes Master节点&#xff1a;192.168.1.146 Kubernetes Minion节点&#xff1a;192.168.1.147…...

通讯录(C语言版)

用c语言实现一个通讯录 功能&#xff1a;.添加、删除、查找、更改、显示、排序联系人 内存存储方式&#xff1a;结构体数组 1.打印菜单&#xff0c;各个功能分别用函数实现&#xff0c;将函数声明放在头文件中。 2.定义联系人信息&#xff0c;将联系人信息与count&#xff…...

natapp内网穿透-将本地运行的程序/服务器通过公网IP供其它人访问

文章目录 1.几个基本概念1.1 局域网1.2 内网1.3 内网穿透1.4 Natapp 2.搭建内网穿透环境3.本地服务测试 1.几个基本概念 1.1 局域网 LAN&#xff08;Local Area Network&#xff0c;局域网&#xff09;是一个可连接住宅&#xff0c;学校&#xff0c;实验室&#xff0c;大学校…...

数据结构八大排序Java源码

文章目录 [1]. 堆排序[2]. 冒泡排序[3]. 选择排序[4]. &#xff08;直接&#xff09;插入排序[5]. 希尔排序&#xff08;属于插入算法&#xff09;[6]. 快速排序[7]. 归并排序[8]. 基数排序 王道数据结构排序讲解 排序算法最佳时间复杂度最坏时间复杂度平均时间复杂度空间复杂度…...

区块链加密虚拟货币交易平台安全解决方案

区块链机密货币交易锁遭入侵&#xff0c;安全存在隐患。使用泰雷兹Protect server HSM加密机&#xff0c;多方位保护您的数据&#xff0c;并通过集中化管理&#xff0c;安全的存储密钥。 引文部分&#xff1a; 损失7000万美元!黑客入侵香港区块链加密货币交易所 2023年9月&…...

【SoC FPGA】HPS启动过程

SoC HPS启动流程 Boot ROMPreloaderBoot Loader HPS的启动是一个多阶段的过程&#xff0c;每一个阶段都会完成对应的工作并且将下一个阶段的执行代码引导起来。每个阶段均负责加载下一个阶段。第一个软件阶段是引导 ROM&#xff0c;引导 ROM 代码查找并且执行称为预加载器的第 …...

Wireshark CLI | Mergecap 篇

简介 Mergecap 是 Wireshark 程序安装时附带的可选工具之一&#xff0c;用于合并数据包文件的命令行工具。 mergecap [ -a ] [ -F <file format> ] [ -I <IDB merge mode> ] [ -s <snaplen> ] [ -V ] -w <outfile>|- <infile> [<infile>…...

10个打工人必备AI神器,升职加薪靠AI

HI&#xff0c;同学们&#xff0c;我是赤辰&#xff0c;本期是第18篇AI工具类教程&#xff0c;文章底部准备了粉丝福利&#xff0c;看完后可领取&#xff01;1. Runway&#xff08;文字转视频AI工具&#xff09; 只需要一句提示词就能精确生成你所想象的视频场景&#xff0c;还…...

Java架构师缓存架构设计

目录 1 导学2 高性能概述2.1 高性能的定义和衡量指标2.2 如何实现高性能的计算机系统或软件程序2.3 木桶理论2.4 如何实现计算机系统或软件程序的高性能3 多级缓存设计3.1 浏览器缓存3.2 CDN缓存3.3 负载均衡的缓存3.4 进程内缓存3.5 分布式缓存4 缓存技术方案5 如何进行缓存拆…...

Linux 安全 - DAC机制

文章目录 一、安全简介二、DAC2.1 UNIX 的自主访问控制2.2 Linux 的自主访问控制 三、进程凭证3.1 简介3.2 uid/gid3.3 系统调用 四、客体标记4.1 简介4.2 系统调用 五、UGO规则源码分析参考资料 一、安全简介 计算机系统应对安全挑战的办法大致有四种&#xff1a;隔离、控制、…...

解决Windows系统win+shift+s截图快捷键失效问题

文章目录 打开任务管理器找到Windows资源管理器&#xff0c;选择重新启动 打开任务管理器 按“Win R”打开&#xff1a; 输入taskmgr.exe&#xff0c;运行&#xff0c;即可打开任务管理器&#xff1a; 找到Windows资源管理器&#xff0c;选择重新启动 点击右下角的“重新启…...

Excel 快速填充

文章目录 利用快速填充进行提取数据利用快速填充进行拆分重组 2013 及以上版本才有的功能. 利用快速填充进行提取数据 有一列的数据已有, 需要提取部分数据到另一列, 只需要输入部分内容, 后面内容可以自动显示, 按下回车即可快速填充. 只要前面手动输入的内容没有错得太离谱…...

OPENCV图像和视频处理

图像基本操作&#xff1a; Opencv图像处理&#xff08;全&#xff09;_胖墩会武术的博客-CSDN博客 import cv2 import matplotlib.pyplot as plt import numpy as npimgcv2.imread(1.jpg) #图像的显示 cv2.imshow(image,img) cv2.waitKey(0) …...

QDir实践

现在有多个文件&#xff0c;路径为&#xff1a; a\xxx\kmd_config\c.json 其中xxx是变量 startcalc,,,,,, 目标&#xff1a; 访问每一个json文件 实例&#xff1a; QString app_path QApplication::applicationDirPath() "/app";QDir dir(app_path);QStringLi…...

网络通信三要素

三要素概述 IP地址&#xff1a;设备在网络中的地址&#xff0c;是唯一的标识。 端口&#xff1a;应用程序在设备中唯一的标识。 协议: 数据在网络中传输的规则&#xff0c;常见的协议有UDP协议和TCP协议。 网络通信过程 A程序通过IP和端口连接到到B程序&#xff0c;再互…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

从 GreenPlum 到镜舟数据库:杭银消费金融湖仓一体转型实践

作者&#xff1a;吴岐诗&#xff0c;杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言&#xff1a;融合数据湖与数仓的创新之路 在数字金融时代&#xff0c;数据已成为金融机构的核心竞争力。杭银消费金…...

「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案

在移动互联网营销竞争白热化的当下&#xff0c;推客小程序系统凭借其裂变传播、精准营销等特性&#xff0c;成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径&#xff0c;助力开发者打造具有市场竞争力的营销工具。​ 一、系统核心功能架构&…...

Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

Vue 模板语句的数据来源

&#x1f9e9; Vue 模板语句的数据来源&#xff1a;全方位解析 Vue 模板&#xff08;<template> 部分&#xff09;中的表达式、指令绑定&#xff08;如 v-bind, v-on&#xff09;和插值&#xff08;{{ }}&#xff09;都在一个特定的作用域内求值。这个作用域由当前 组件…...