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 / 1
        this.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/1
        this.list[index].C = this.js(val3)
        return this.list[index].C
    }
  }
}

结论

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