elementUI el-input 调整数据但是前端界面不刷新
在表格行中提供一个输入框,允许用户输入,并且可以进行简单的四则计算,计算在onblur或者回车触发。
<el-input
v-model="scope.row[scope.column.label]"
@focus="fInputFocus(scope.$index, scope.column.label)"
:ref="scope.$index + '|' + scope.column.label"
:disabled="isReadonly"
@blur="OnBlur(t, table, scope.$index, scope.column.label)"
@keyup.enter.native="$event.target.blur"
>
</el-input>
但是把运算结果赋值之后,界面数据一直不刷新,控制台log出来的数据是已经更改成功了的。
解决方法:使用this.$set重新赋值强制刷新视图,但是不能就这么赋值这个值,需要重新赋值行或者整个表数据, 因为我这个的表格结构不是寻常的行结构,所以我直接重新赋值整表数据了,界面成功显示运算结果
OnBlur(t, table, index, bill) {
let value = this.stepAndBills[t].bills[index][bill]
// eval 由于JS的计算特性,会有精度问题,此处使用四舍五入修复
this.stepAndBills[t].bills[index][bill] = this.toFixed(eval(value), 4)
// 单独赋值某个值不会触发,因为el-table监听的是一整行数据,并不是某一个单元格。所以直接重新赋值整个对象
//this.$set(this.stepAndBills[t].bills[index], `${bill}`, this.toFixed(eval(value), 4))
// 强制刷新视图
this.$set(this.stepAndBills, t, this.stepAndBills[t])
}
elementUI el-input 调整数据但是前端界面不刷新的更多相关文章
- Blazui 常见问题:我更新了数据,为什么界面没刷新?
首发于:http://www.blazor.group:8000/topic/reply?tpid=9 开门见山,不介绍,不废话 建议食用本文前先食用 https://www.cnblogs.com/ ...
- 瑞联科技:Pwp3框架 调用存储过程返还数据集合 到前端界面展示
一:代码结构: 1:Js 代码结构 2:Java 代码结构 二:前端界面展示效果 为了数据安全性:界面数据做了处理 三:全端代码展示 1:main.vop <html> <head& ...
- EL表达式 JSTL中的常用EL函数 动态数据的国际化
ELppt: EL 全名为Expression Language.EL主要作用: 获取数据: •EL表达式主要用于替换JSP页面中的脚本表达式,以从各种类型的web域 中检索java对象.获取数据.( ...
- 从前端界面开发谈微信小程序体验
本文由云+社区发表 作者介绍:练小习,2011年加入搜狐,负责搜狐相册的产品策划与前端开发.2015年后加入腾讯 ISUX (社交用户体验设计部),目前主要负责腾讯云的UI开发工作,专注于人机交互,有 ...
- JAVA基础之JDBC开发、JSTL语法、EL表达式与数据分页
一.直接使用JDBC开发的问题 1.当表中的列很多时,需要写很长的SQL语句 还需要写大量 setXXX() 设置参数语句 读取数据时还需要写大量setXXXX()设置属性语句 2.非常容易出错,而且 ...
- 使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面
世界上唯一不变的东西就是变化,我们通过总结变化的规律,以规律来应付变化,一切事情处理起来事半功倍.我们在开发后端服务代码,前端界面代码的时候,界面都是依照一定的规律进行变化的,我们通过抽取数据库信息, ...
- 基于SqlSugar的开发框架循序渐进介绍(15)-- 整合代码生成工具进行前端界面的生成
在前面随笔<基于SqlSugar的开发框架循序渐进介绍(12)-- 拆分页面模块内容为组件,实现分而治之的处理>中我们已经介绍过,对于相关的业务表的界面代码,我们已经尽可能把不同的业务逻辑 ...
- elementUi中input输入字符光标在输入一个字符后,光标失去焦点
elementUi中input输入字符光标在输入一个字符后,光标就退出,无法输入需要再次聚焦然后输入一个字符又再次退出 首先,用elementUi正常用v-model绑定输入的值是不会造成光标退出的, ...
- Django中前端界面实现级联查询
Django前端界面实现级联查询 一.前端界面中 <span scope="col" colspan="6"> 院系:<select id=& ...
- 循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示
在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...
随机推荐
- 如何为 Debian 11 安装图形用户界面 (GUI)
如何为 Debian 11 安装图形用户界面 (GUI) allway2 于 2021-12-26 17:30:14 发布 11767 收藏 23文章标签: debian 服务器 linux版权 华为 ...
- Vue watch监听 date中的变量 与 数组或者对象的数据变化
直接看下面代码: 1.红色的的为一个对象,watch监听时.需要借助 computed 属性,否则watch监听打印出来的新旧值看不出.(注:方法可以随便写,但是 computed 中 与 watch ...
- CVE-2020-2551
前言 2020年1月15日,Oracle发布了一系列的安全补丁,其中Oracle WebLogic Server产品有高危漏洞,漏洞编号CVE-2020-2551,CVSS评分9.8分,漏洞利用难度低 ...
- 线性斜压模式LBM学习&安装实录
本文基本参照了LBM的用户手册进行. 环境:Ubuntu 18.04LTS (Windows Subsystem Linux) 编译器:gfortran 7.5.0 安装包: lapack-3.9.0 ...
- 取消Andorid设备的严格模式
在做文件拍照选择等应用时,发现7.0以上手机需要主动关闭严格模式才能让代码不报错 通过关闭严格模式绕过fileprovider 权限的控制的方法,绕过FileProvider在应用间共享文件的限制 7 ...
- 用字典代替'if-elif-else'
在实际应用中,我们经常会需要采用if-elif-else控制语句以根据不同条件,作出不同的操作.if-elif-else固然可以,但是它也存在冗余的缺点,特别是当条件较多时这一缺点尤为明显.因此,本文 ...
- 远程ubuntu虚拟机(VirtualBox)
环境 实机win10,虚拟软件是Oracle VM VirtualBox 下载地址https://www.virtualbox.org/ ubuntu虚拟机配置 网络选桥接网卡, 原因是桥接网卡下,根 ...
- dynamics 365/crm 导入解决方案报 发生 sql server 错误
dynamics 365/crm 导入解决方案报 发生 sql server 错误.{1}{0} 错误代码 80044150. 帮助我解决此问题. 这时候,可以检查数据库服务器的日志看看,可能会找到S ...
- java技术系列(一) Enum
Enum的本质是类,继承自Enum类. enum直接使用==进行比较就可以. 类型的静态values方法,返回左右的枚举实例. ordinal方法返回enum声明中枚举常亮的位置. enum可以继承接 ...
- STM32中HAL库和标准库的区别
转载自:https://www.lmonkey.com/t/RwykY8bBX STM32标准库与HAL库比较 ST为开发者提供了非常方便的开发库.到目前为止,有标准外设库(STD库).HAL库.LL ...