当前位置：首页 > news >正文

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

news 2025/8/15 19:45:59

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

文章目录

前言
方法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}}
}