【bug】vxe-table可编辑插槽,el-input-number的input事件数据多的情况下频繁触发至页面崩溃

2023-05-16

今天的标题有点长,其实bug也不一定就是vex-table才会有,el-table也许也会遇到

列表有一列是可编辑的数字类输入框

用的是input事件

                    <vxe-table
                      ref="xTable"
                      show-overflow
                      auto-resize
                      height="600"
                      border
                      align="center"
                      :edit-config="{ trigger: 'click', mode: 'cell', showIcon: false }"
                      empty-text="暂无数据"
                      :data="inventoryListData"
                      :cell-class-name="cellClassName"
                    >
                    <vxe-column min-width="100px" field="qtyActual" title="数量" 
                    :edit-render="{ name: 'input', autoselect: true }" 
                    show-overflow>
                          <template #edit="{ row, rowIndex }">
                            <el-input-number
                              v-model="row.qtyActual"
                              :step="1"
                              :disabled="isDisabledTable"
                              :controls="false"
                              :min="0"
                              @input="sumAmount(row, rowIndex)"
                            ></el-input-number>
                          </template>
                        </vxe-column>
                       </vxe-table>               

排查后发现不是vxe-table表格的问题,也不是edit插槽的渲染问题,而是这个sumAmount方法写的有问题

    // 数量求和
    sumAmount(row, index) {
      if (row.qtyActual <= row.qty) {
        // 金额
        row.costActual = ((row.cost / row.qty) * row.qtyActual).toFixed(2)    
      } else {
        row.qtyActual = ''
        this.$message.warning('xx数量应小于等于xx数量!')
      }  
      this.inventoryListData.splice(index, 1, row)
    
    },

问题就出在最后一行代码上,在经过一些计算后,将最新的row替换原来的row
关键是splice方法会改变原数组

解决方法:
1、可以将input事件换为change事件
2、还是用input事件,直接注掉this.inventoryListData.splice(index, 1, row)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【bug】vxe-table可编辑插槽,el-input-number的input事件数据多的情况下频繁触发至页面崩溃 的相关文章

  • 任何的Linux开发板+ADB+fastboot驱动-----真实有效!

    目录 1 xff1a ADB安装 2 xff1a fastboot驱动安装 1 xff1a ADB安装 这个可以在CSDN查 xff0c 不讲 2 xff1a fastboot驱动安装 1条消息 解决Win10 Win11 Fastboot
  • SQLite Studio如何使用的详细教程!零开始教起哦!

    目录 1 xff1a 下载安装SQLite Studio xff08 可在CSDN查找下载 xff09 2 xff1a 打开SQLite Studio 3 xff1a 使用SQLite Studio 1 xff1a 下载安装SQLite S
  • 什么是makefile?教你简单编写和使用Makefile

    什么是Makefile xff1f Makefile可以简单的理解成一个工程文件的编译规则 Makefile文件描述了Linux系统下C C 43 43 项目工程的编译规则 xff0c 它的作用是用来自动化编译C C 43 43 的项目 一
  • 《程序员面试金典(第6版)》面试题 16.14. 最佳直线(向量,C++)

    题目描述 给定一个二维平面及平面上的 N 个点列表Points xff0c 其中第i个点的坐标为Points i 61 Xi Yi 请找出一条直线 xff0c 其通过的点的数目最多 设穿过最多点的直线所穿过的全部点编号从小到大排序的列表为S
  • 制作Ubuntu启动盘并安装ros的学习笔记

    本菜鸡刚开始学习ros xff0c 之前一直用虚拟机 xff0c 但但是配置极其麻烦 xff0c 容易出现各种错误 xff0c 对新手极其不友好 亲测做一个Ubuntu的启动盘很是稳定 为了后续学习时回看 xff0c 记录一下遇到的问题以及
  • Ubuntu22.04没有ttyUSB(无法访问 ‘/dev/ttyUSB‘: 没有那个文件或目录)问题解决

    无法访问 dev ttyUSB 没有那个文件或目录 环境 xff1a ubuntu22 04 xff0c 使用需求为USB转串口 问题描述 在给串口读写权限时 xff0c 出现问题 xff1a 无法访问 dev ttyUSB0 没有那个文件
  • 光流(optical flow)基础概念以及典型算法

    光流 xff08 optical flow xff09 基础概念以及典型算法 文章目录 光流 xff08 optical flow xff09 基础概念以及典型算法什么是光流 xff1f 一 传统经典光流算法 xff1a Lucas Kan
  • PX4无人机安装问题及解决方案

    文章目录 1 git clone1 git clone fatal error2 PX4源码下载很慢 2 ROS安装1 设置密钥2 xff09 E 无法定位软件包 ros melodic desktop full3 sudo apt ins
  • 玩转k8s(四)—— 通过Service访问Pod

    我们不应该期望k8s Pod是健壮的 xff0c 而是要假设Pod中的容器很可能因为各种原因发生故障而死掉 Deployment等Controller会通过动态的创建和销毁Pod来保证应用整体的健壮性 换句话说 xff0c Pod是脆弱的
  • STM32之IO模拟串口篇

    概述 xff1a 硬件 xff1a 基于stm32f767igt6水星板开发 xff1b 软件 xff1a 使用了RT Thread实时操作系统 xff0c 两个空闲IO口 PE2用作串口TX端 xff0c 搭配一个定时器控制发送时序 xf
  • BPMN2.0 任务-脚本任务

    描述 脚本任务 script task 是自动执行的活动 当流程执行到达脚本任务时 会执行相应的脚本 脚本任务用左上角有一个小 脚本 图标的标准BPMN 2 0任务 圆角矩形 表示 脚本任务使用script与scriptFormat元素定义
  • 最短路径问题——基于Dijkstra算法和Floyd算法的最短路径问题

    目录 1 算法介绍 xff08 1 xff09 Dijkstra Algorithm xff08 迪杰斯特拉算法 xff09 xff08 2 xff09 Floyd Algorithm xff08 佛洛依德算法 xff09 xff08 3
  • 2.1.2 进程的状态与转换

    目录 知识总览 1 三种基本状态 xff08 1 xff09 运行态 xff08 Running xff09 xff08 2 xff09 就绪态 xff08 Ready xff09 xff08 3 xff09 阻塞态 xff08 Waiti
  • 合并排序与快速排序算法

    文章目录 算法介绍代码实现1 合并排序2 快速排序 总结 算法介绍 合并排序与快速排序是排序算法中常用的两种排序算法 xff0c 合并排序把数据分为两段 xff0c 从两段中逐个选最小的元素移入新数据的末尾 xff1b 快速排序是在序列中挑
  • 2进制、8进制、10进制、16进制相互转换

    文章目录 介绍1 二进制转其他进制2 八进制转其他进制3 十进制转其他进制4 十六进制转其他进制总结 介绍 百度百科 xff1a 进制也就是进位计数制 xff0c 是人为定义的带进位的计数方法 xff08 有不带进位的计数方法 xff0c
  • Hadoop学习笔记--HBase相关操作指令

    文章目录 引言0 HBase的启动与停止1 创建表2 删除表3 表的其他操作3 1 修改表结构3 2 查看表结构3 3 显示所有用户定义的表3 4 查询表是否存在3 5 查询表是否可用3 6 查询表中记录数 4 插入数据4 1 插入单条数据
  • Hadoop学习笔记--MapReduce

    文章目录 引言1 经典案例分析 xff1a WordCount1 1 Map阶段 xff1a TokenizerMapper类1 2 Reduce阶段 xff1a IntSumReduce类1 3 Driver阶段 xff1a main x
  • Hadoop学习笔记--YARN

    文章目录 引言1 YARN的优势1 1 可扩展性 xff08 Scalability xff09 1 2 可用性 xff08 Availability xff09 1 3 利用率 xff08 Utilization xff09 1 4 多租
  • scala编程--计算级数&统计学生成绩

    目录 案例1 xff1a 计算级数1 1 案例要求1 2 实现代码 案例2 xff1a 统计学生成绩1 1 案例要求1 2 实现代码 总结 案例1 xff1a 计算级数 1 1 案例要求 级数计算函数实现较为简单 xff0c 这里不再赘述
  • RDD本地文件系统读入显示文件不存在fileNotExit

    问题 在从本地文件系统读入数据创建RDD时 xff0c 执行行动操作 xff0c 显示文件不存在 解决方案 从本地文件系统读入时 xff0c 需在所有节点的相同目录下存在该文件 xff0c 如读取文件在 file span class to

随机推荐