elementui动态表单实现计算属性携带参数,并将计算出的值四舍五入保留两位小数

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 方法1
  • 方法2
  • 结论


前言

写项目的时候,遇到需要在动态表单中,将同一级输入框输入的内容计算出来,并动态显示,发现computer计算属性好像不能带参数,最后查了好多文档才解决,看下面简单案例


方法1

vue中computed计算属性无法直接进行传参,如果有传参数的需求可以使用闭包函数(也叫匿名函数)实现。例如计算出每一组A输入框中的值+B输入框中的值并动态显示在C输入框中

<template><div id="app"><el-form ref="form" :model="form" label-width="80px"><div class="box" v-for="(item,index) in list" :key="index"><el-form-item label="A"><el-input v-model="item.A"></el-input></el-form-item><el-form-item label="B"><el-input v-model="item.B"></el-input></el-form-item><el-form-item label="C"><el-input :value="ab(index,item.A,item.B)"></el-input></el-form-item></div></el-form></div>
</template><script>
export default {computed: {ab() {return function (index, val1, val2) {// 除以1,是为了强制转换成number类型let val3 = val1 / 1 + val2 / 1this.list[index].C = this.js(val3)return this.list[index].C}}},data() {return {list: [{A: null,B: null,C: null},{A: null,B: null,C: null}]}},methods: {// 四舍五入保留两位小数js(val) {return (Math.round(val * 100) / 100).toFixed(2)}}
}
</script>

方法2

也可以直接写成methods里的方法,但是不推荐使用methods(没有缓存),具体为啥可以看看vue官网method和computed的区别

<template><div id="app"><el-form ref="form" :model="form" label-width="80px"><div class="box" v-for="(item,index) in list" :key="index"><el-form-item label="A"><el-input v-model="item.A" @change="ab(index)"></el-input></el-form-item><el-form-item label="B"><el-input v-model="item.B" @change="ab(index)"></el-input></el-form-item><el-form-item label="C"><el-input :value="item.C"></el-input></el-form-item></div></el-form></div>
</template><script>
export default {data() {return {list: [{A: null,B: null,C: null},{A: null,B: null,C: null}]}},methods: {// 四舍五入保留两位小数js(val) {return (Math.round(val * 100) / 100).toFixed(2)},ab(index){let val3 = this.list[index].A/1 + this.list[index].B/1this.list[index].C = this.js(val3)return this.list[index].C}}
}

结论

个人感觉还是第一种用的爽

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

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

相关文章

4.3、Flink任务怎样读取Kafka中的数据

目录 1、添加pom依赖 2、API使用说明 3、这是一个完整的入门案例 4、Kafka消息应该如何解析 4.1、只获取Kafka消息的value部分 ​4.2、获取完整Kafka消息(key、value、Metadata) 4.3、自定义Kafka消息解析器 5、起始消费位点应该如何设置 ​5.1、earliest() 5.2、lat…

zookeeper总结

1.概念 Zookeeper 是一个分布式协调服务&#xff0c;可用于服务发现&#xff0c;分布式锁&#xff0c;分布式领导选举&#xff0c;配置管理等。Zookeeper 提供了一个类似于 Linux 文件系统的树形结构&#xff08;可认为是轻量级的内存文件系统&#xff0c;但只适合存少量信息&…

MYSQL 根据某个字段计算排名查询

Mysql8.0前的版本 在MySQL中&#xff0c;你可以使用变量和子查询来计算基于某个字段的排名。以下是一个示例查询&#xff0c;假设你要根据某个字段&#xff08;例如score&#xff09;计算排名&#xff1a; SELECT rank, user_id, score FROM (SELECT user_id, score, rank : …

nginx编译以及通过自定义生成证书配置https

1. 环境准备 1.1 软件安装 nginx安装编译安装以及配置https&#xff0c;需要gcc-c pcre-devel openssl openssl-devel软件。因此需要先安装相关软件。 yum -y install gcc-c pcre-devel openssl openssl-devel wgetopenssl/openssl-devel&#xff1a;主要用于nginx编译的htt…

Redis心跳检测

在命令传播阶段&#xff0c;从服务器默认会以每秒一次的频率&#xff0c;向主服务器发送命令&#xff1a; REPLCON FACK <rep1 ication_ offset>其中replication_offset是从服务器当前的复制偏移量。 发送REPLCONF ACK命令对于主从服务器有三个作用&#xff1a; 检测主…

【C++】const_cast基本用法(详细讲解)

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…

步入React前厅 - Css In React

目录 扩展学习资料 行内样式 引入样式表 CSS Module /src/components/common.module.css /src/components/listitem.module.css css管理进阶 Css管理工具 练习 扩展学习资料 资料名称 链接 css module CSS Modules 用法教程 - 阮一峰的网络日志 在React中使…

Myatis和MybatisPlus常见分页方式

Myatis和MybatisPlus常见分页方式 一、mybaits 原生limit分页 SELECT * FROM order_info limit #{pageNow},#{pageSize}分页插件&#xff08;ssm中&#xff0c;通过xml配置分页。springboot通过则通过配置文件&#xff09; PageHelper插件&#xff1a;PageHelper.startPage(…

js的转变

今天闲着没事在chat上面搜了一下js的转变大家看看&#xff0c;不喜勿喷 1. 起源和简单脚本语言 JavaScript诞生于上世纪90年代早期&#xff0c;最初作为一种简单的脚本语言用于网页浏览器中&#xff0c;主要用于添加动态效果和交互。当时&#xff0c;它的用途局限&#xff0c…

【图像去噪的滤波器】非局部均值滤波器的实现,用于鲁棒的图像去噪研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

flutter开发实战-实现marquee根据文本长度显示文本跑马灯效果

flutter开发实战-实现marquee文本跑马灯效果 最近开发过程中需要marquee文本跑马灯效果&#xff0c;这里使用到了flutter的插件marquee 效果图如下 一、marquee 1.1 引入marquee 在pubspec.yaml中引入marquee # 跑马灯效果marquee: ^2.2.31.2 marquee使用 marquee使用也是…

想要延长Macbook寿命?这六个保养技巧你必须get!

Mac作为我们工作生活的伙伴&#xff0c;重要性不需要多说。但在使用的过程中&#xff0c;我们总会因不当操作导致Mac出现各种问题。 要想它长久的陪伴&#xff0c;平时的维护与保养自然不能少&#xff0c;Mac的保养很重要的两点就是硬件保养和电脑系统保养&#xff0c;硬件保养…

使用 POI 在 Word 中重新开始编号、自定义标题格式

效果图 引入依赖 <!-- https://mvnrepository.com/artifact/org.apache.poi/poi --><dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>4.1.2</version></dependency><!-- https…

SpringCloud整体架构概览

什么是SpringCloud 目标 协调任何服务&#xff0c;简化分布式系统开发。 简介 构建分布式系统不应该是复杂的&#xff0c;SpringCloud对常见的分布式系统模式提供了简单易用的编程模型&#xff0c;帮助开发者构建弹性、可靠、协调的应用程序。SpringCloud是在SpringBoot的基…

Unity游戏源码分享-儿童益智数学大脑训练游戏

Unity游戏源码分享-儿童益智数学大脑训练游戏 5秒内选择答案 项目下载地址&#xff1a;https://download.csdn.net/download/Highning0007/88198773

WebAssembly

WebAssembly&#xff08;简称Wasm&#xff09;是一种面向Web的二进制指令格式&#xff0c;用于在现代Web浏览器中运行高性能的可移植代码。它是一种跨平台、低级别的虚拟机技术&#xff0c;允许开发者将不同编程语言的代码编译成Wasm格式&#xff0c;然后在Web浏览器中运行。 …

信息学奥赛一本通——1267:【例9.11】01背包问题

文章目录 题目【题目描述】【输入】【输出】【输入样例】【输出样例】 AC代码 题目 【题目描述】 一个旅行者有一个最多能装 M M M 公斤的背包&#xff0c;现在有 n n n 件物品&#xff0c;它们的重量分别是 W 1 &#xff0c; W 2 &#xff0c; . . . , W n W_1&#xff0c…

整理mongodb文档:改

个人博客 整理mongodb文档:改 求关注&#xff0c;求批评&#xff0c;求进步 文章概叙 本文主要讲的是mongodb的updateOne以及updateMany&#xff0c;主要还是在shell下进行操作&#xff0c;也讲解下主要的参数upsert以及更新的参数。 数据准备 本次需要准备的数据不是很多…

web前端面试--递归(斐波那契数列)

web面试题 本人是一个web前端开发工程师&#xff0c;主要是vue框架&#xff0c;整理了一些面试题&#xff0c;今后也会一直更新&#xff0c;有好题目的同学欢迎评论区分享 ;-&#xff09; web面试题专栏&#xff1a;点击此处 文章目录 web面试题定义源码测试示例 之前去笔试&…

电脑连接安卓设备显示offline

The Android is offline. This can be resolved by physically disconnecting and...用USB线连接手机和电脑&#xff0c;打开cmd&#xff0c;输入adb devices -l, adb devices -l结果显示可以识别手机&#xff0c;但是状态为offline 打开另外一个终端&#xff0c;输入 adb k…