在表格行中提供一个输入框,允许用户输入,并且可以进行简单的四则计算,计算在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 调整数据但是前端界面不刷新的更多相关文章

  1. Blazui 常见问题:我更新了数据,为什么界面没刷新?

    首发于:http://www.blazor.group:8000/topic/reply?tpid=9 开门见山,不介绍,不废话 建议食用本文前先食用 https://www.cnblogs.com/ ...

  2. 瑞联科技:Pwp3框架 调用存储过程返还数据集合 到前端界面展示

    一:代码结构: 1:Js 代码结构 2:Java 代码结构 二:前端界面展示效果 为了数据安全性:界面数据做了处理 三:全端代码展示 1:main.vop <html> <head& ...

  3. EL表达式 JSTL中的常用EL函数 动态数据的国际化

    ELppt: EL 全名为Expression Language.EL主要作用: 获取数据: •EL表达式主要用于替换JSP页面中的脚本表达式,以从各种类型的web域 中检索java对象.获取数据.( ...

  4. 从前端界面开发谈微信小程序体验

    本文由云+社区发表 作者介绍:练小习,2011年加入搜狐,负责搜狐相册的产品策划与前端开发.2015年后加入腾讯 ISUX (社交用户体验设计部),目前主要负责腾讯云的UI开发工作,专注于人机交互,有 ...

  5. JAVA基础之JDBC开发、JSTL语法、EL表达式与数据分页

    一.直接使用JDBC开发的问题 1.当表中的列很多时,需要写很长的SQL语句 还需要写大量 setXXX() 设置参数语句 读取数据时还需要写大量setXXXX()设置属性语句 2.非常容易出错,而且 ...

  6. 使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面

    世界上唯一不变的东西就是变化,我们通过总结变化的规律,以规律来应付变化,一切事情处理起来事半功倍.我们在开发后端服务代码,前端界面代码的时候,界面都是依照一定的规律进行变化的,我们通过抽取数据库信息, ...

  7. 基于SqlSugar的开发框架循序渐进介绍(15)-- 整合代码生成工具进行前端界面的生成

    在前面随笔<基于SqlSugar的开发框架循序渐进介绍(12)-- 拆分页面模块内容为组件,实现分而治之的处理>中我们已经介绍过,对于相关的业务表的界面代码,我们已经尽可能把不同的业务逻辑 ...

  8. elementUi中input输入字符光标在输入一个字符后,光标失去焦点

    elementUi中input输入字符光标在输入一个字符后,光标就退出,无法输入需要再次聚焦然后输入一个字符又再次退出 首先,用elementUi正常用v-model绑定输入的值是不会造成光标退出的, ...

  9. Django中前端界面实现级联查询

    Django前端界面实现级联查询 一.前端界面中 <span scope="col" colspan="6"> 院系:<select id=& ...

  10. 循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示

    在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...

随机推荐

  1. React使用高阶组件与Hooks实现权限拦截教程

    导读 高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数.这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React高阶组件使用小结,一起看看吧 高阶 ...

  2. 【uboot 】uboot通过tftp下载内核

    1.开发板uboot,虚拟机能相互ping通 2.ubuntu搭建好tftp服务器,设置好文件夹,放置好文件 sudo apt install tftpd-hpa  //安装服务程序 sudo sys ...

  3. XMind8破解,详细版(亲测)

    废话不多说,直接上料: 一.资源 百度网盘XMind8: 链接:https://pan.baidu.com/s/1h2DXkni4-POEpHyBqLxjwA 提取码:kqgy 破解补丁: 链接:ht ...

  4. 树莓派,脚本遍历当前目录下视频文件,并用omxplayer播放

    事先准备好视频文件,文件名内包含视频尺寸信息,以方便构造 --win "x1 y1 x2 y2" 字符串. 通过 omxplayer  -i  filename   可查看视频尺寸 ...

  5. P1219 [USACO1.5]八皇后 Checker Challenge

    好长时间没登博客园了,今天想起了账号密码,遂发一篇题解 最近因为复赛正在复健搜索,所以做了这道题 这道题说难并不是很难,但是在于这个题需要找到两个规律 以下是原题 [USACO1.5]八皇后 Chec ...

  6. boolean布尔型盲注

    mysql中limit的详细用法 1.用于强制返回指定的记录行数 在查询中,经常要返回前几条或者中间某几行数据时,用到limit 语法如下 select * from table_name limit ...

  7. windows 2012 打补丁升级后不能启动处理

    如果可以进入WinRE这个修复的高级选项,选择安全模式,是否可以进入,卸载最近安装的补丁,再重启看一下. 如果无法进入安全模式的话,那么选择cmd模式,使用下方命令.这通常会回退pending的upd ...

  8. APP学习3

    1. 常见控件 Button控件 继承自TextView控件,既可以显示文本,又可以显示图片,同时也允许用户通过点击来执行操作,点击效果. onClick属性:先在layout文件中指定onClick ...

  9. Linux安装证书

    Linux安装 vCenter root CA: 1.访问vCenter管理页面,下载"下载受信任的根 CA 证书" 2.压缩文件内带有数字作为扩展名(.0..1 等)的文件是根证 ...

  10. OA产品并发访问能力

    环境:cpu 16c,内存 32G,系统管理服务.jtportal服务 启动双实例样本:50线程,循环登录60次,共计3000次登录,用时3分钟40秒结论:平均每分钟支持800次登录,均在3秒左右.按 ...