element-ui操作表格行内容如何获取当前行索引?

news2024/11/15 16:01:46

需求:

根据每个用户的提交次数、撤回次数,动态计算出实际次数,并且提交次数不能小于撤回次数

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 80%"
      border>
      <el-table-column
        prop="date"
        label="日期"
        width="120">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="250">
      </el-table-column>
      <el-table-column
        prop="submitNumber"
        label="提交次数"
        width="180">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.submitNumber" size="small" :min="scope.row.withdrawNumber" label="描述文字" @change="(currentValue)=>setProNum(currentValue,scope.$index)"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column
        prop="withdrawNumber"
        label="撤回次数">
      </el-table-column>
      <el-table-column
        prop="actualNumber"
        label="实际次数">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'TableRowIndex',
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        submitNumber:34,
        withdrawNumber:2,
        actualNumber:32,
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        submitNumber:6,
        withdrawNumber:3,
        actualNumber:3,
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        submitNumber:13,
        withdrawNumber:7,
        actualNumber:6,
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄',
        submitNumber:34,
        withdrawNumber:12,
        actualNumber:22,
      }]
    };
  },
  methods: {
    setProNum(currentValue, index){
      this.tableData[index].actualNumber = currentValue - this.tableData[index].withdrawNumber
    },
  },
};
</script>

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

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

相关文章

俄罗斯VK与Yandex,谁的优势更胜一筹?

俄罗斯VK和Yandex作为该国两大重要的网络平台&#xff0c;各自具有独特的优势。 VK是一个社交媒体巨头&#xff0c;以其庞大的用户基础著称。 这个平台不仅拥有超过数亿的注册用户&#xff0c;而且这些用户在平台上的活跃度极高&#xff0c;每天都会产生海量的内容与互动。 …

优优嗨聚集团:餐饮新纪元,揭秘餐饮合作背后的双赢奥秘

在竞争激烈的餐饮市场中&#xff0c;单打独斗早已不再是主流&#xff0c;而餐饮合作却成为了一种新的趋势。那么&#xff0c;餐饮合作究竟有哪些优势&#xff0c;能够吸引众多餐饮从业者纷纷投身其中呢&#xff1f;本文将为您揭秘餐饮合作背后的双赢奥秘。 一、资源共享&#x…

go-redis 封装事件-client封装模型、批量数据处理的导出器设计

一、redis-go的封装实践-client模型 // Copyright 2020 Lingfei Kong <colin404foxmail.com>. All rights reserved. // Use of this source code is governed by a MIT style // license that can be found in the LICENSE file.package storageimport ("context&q…

(19)夹钳(用于送货)

文章目录 前言 1 常见的抓手参数 2 参数说明 前言 Copter 支持许多不同的抓取器&#xff0c;这对送货应用和落瓶很有用。 按照下面的链接&#xff08;或侧边栏&#xff09;&#xff0c;根据你的设置了解配置信息。 Electro Permanent Magnet v3 (EPMv3)Electro Permanent M…

老胡的周刊(第149期)

老胡的信息周刊[1]&#xff0c;记录这周我看到的有价值的信息&#xff0c;主要针对计算机领域&#xff0c;内容主题极大程度被我个人喜好主导。这个项目核心目的在于记录让自己有印象的信息做一个留存以及共享。 &#x1f3af; 项目 mesop[2] Mesop 是一个基于 Python 的 UI 框…

【机器学习】——决策树模型

&#x1f4bb;博主现有专栏&#xff1a; C51单片机&#xff08;STC89C516&#xff09;&#xff0c;c语言&#xff0c;c&#xff0c;离散数学&#xff0c;算法设计与分析&#xff0c;数据结构&#xff0c;Python&#xff0c;Java基础&#xff0c;MySQL&#xff0c;linux&#xf…

基于Java+SpringMvc+Vue技术的在线学习交流平台的设计与实现---60页论文参考

博主介绍&#xff1a;硕士研究生&#xff0c;专注于Java技术领域开发与管理&#xff0c;以及毕业项目实战✌ 从事基于java BS架构、CS架构、c/c 编程工作近16年&#xff0c;拥有近12年的管理工作经验&#xff0c;拥有较丰富的技术架构思想、较扎实的技术功底和资深的项目管理经…

vulhub-activemq(CVE-2016-3088)

在 Apache ActiveMQ 5.12.x~5.13.x 版本中&#xff0c;默认关闭了 fileserver 这个应用&#xff08;不过&#xff0c;可以在conf/jetty.xml 中开启&#xff09;&#xff1b;在 5.14.0 版本后&#xff0c;彻底删除了 fileserver 应用。【所以在渗透测试过程中要确定好 ActiveMQ …

Avalonia 常用控件四 Text Controls

1、AutoCompleteBox <StackPanel Margin"20"><TextBlock Margin"0 5">选择一种动物</TextBlock><AutoCompleteBox x:Name"animals" FilterMode"StartsWith"/><!--AutoCompleteBox:Items:要匹配的项目列表。…

Redis集群篇

目录 传送门前言一、Redis主从复制二、Redis哨兵模式&#xff08;自动选举老大的模式&#xff09;三、Redis集群架构&#xff08;最佳&#xff09;四、Redis缓存穿透和雪崩&#xff08;面试高频&#xff09; 传送门 SpringMVC的源码解析&#xff08;精品&#xff09; Spring6的…

唤醒知识循环,共筑绿色阅读梦——探索旧书回收小程序的无限可能

在这个信息爆炸的时代&#xff0c;书籍作为知识与智慧的载体&#xff0c;其重要性不言而喻。然而&#xff0c;随着电子阅读的兴起和书籍更新换代的加速&#xff0c;大量旧书被束之高阁&#xff0c;甚至面临被遗弃的命运。这不仅是对宝贵文化资源的浪费&#xff0c;也是对环境保…

51单片机嵌入式开发:5、按键、矩阵按键操作及protues仿真

按键、矩阵按键操作及protues仿真 1 按键介绍1.1 按键种类1.2 按键应用场景 2 按键电路3 按键软件设计3.1 按键实现3.2 按键滤波方法3.3 矩阵按键软件设计3.4 按键Protues 仿真 4 按键操作总结 提示 1 按键介绍 1.1 按键种类 按键是一种用于控制电子设备或电路连接和断开的按…

UGC与AI引领的下一个10年,丝芭传媒已经准备好

丝芭传媒最近传来的消息&#xff0c;都跟技术相关。 基于自研AI大模型“Paro&#xff08;心乐舞河&#xff09;”的AIGPT及AIGC生成工具APP“鹦鹉人”开启用户内测。2023年3月技术测试的图形化智能社交基座“美踏元宇宙”&#xff0c;也将开放首轮用户内测。 此外&#xff0c…

搭建一个成功的短视频社区,你需要知道这些

近年来&#xff0c;短视频以其独特的魅力在全球范围内迅速崛起。无论是抖音、快手等国内巨头的迅速扩张&#xff0c;还是国外各类短视频应用的不断涌现&#xff0c;都证明了短视频时代的来临。短视频以其消费门槛低、娱乐性强、信息获取快等特点&#xff0c;赢得了广大用户的青…

node使用express在服务器上创建接口,携带参数访问时返回参数

一、下载nodejs​​​​​​Node.js — 在任何地方运行 JavaScriptNode.js is a JavaScript runtime built on Chromes V8 JavaScript engine.https://nodejs.org/zh-cn 二、 安装Express 找一个文件夹&#xff0c;创建 mkdir myapp cd myapp三、初始化一个新的Node.js项目&…

入门PHP就来我这(高级)15 ~ 图书删除功能

有胆量你就来跟着路老师卷起来&#xff01; -- 纯干货&#xff0c;技术知识分享 路老师给大家分享PHP语言的知识了&#xff0c;旨在想让大家入门PHP&#xff0c;并深入了解PHP语言。 今天给大家接着上篇文章实现图书删除功能&#xff0c;来实现删除图书信息记录行的功能。 1 删…

HTML-CSS 入门介绍

1.web 网站的工作流程 2.web前端开发 简单示例 <html> <head> <title>HTML快速入门</title> </head> <body> <h1>Hello HTML</h1> <img src1.jpg></img> <img src1.jp…

RPA影刀 | 循环 + 嵌套循环 + 循环中的continue和break

一、循环 循环的构成 重复在做的事&#xff08;不变的&#xff09;&#xff1a;循环体每次操作的对象&#xff08;变化的&#xff09;&#xff1a;循环项 二、ForEach列表循环 三、循环相似元素 四、For次数循环 五、嵌套循环 测试目标&#xff1a;遍历所有页面&#xff0…

连升2级,3区变1区,这本计算机杂志当投~

福利✨✨福利✨✨ &#x1f914;想快速录用&#xff0c;顺利毕业/评职吗&#xff1f;没问题&#xff01;&#x1f4af; &#x1f3af;EI期刊征稿&#xff0c;提交后2个月返修&#xff0c;修改后1个月录用&#xff0c;1周见刊&#xff0c;2周检索&#xff1b; &#x1f4e2;人工…

C语言学习笔记[22]:分支语句switch

switch语句 switch语句也是一种分支语句&#xff0c;常用于多分支的情况 switch语句的语法形式是&#xff1a; switch(整型表达式) {语句项; }而语句项是什么呢&#xff1f; case 整型常量表达式:语句; switch语句中的break 对于case 语句来说&#xff0c;我们day输入的多…