element中动态表单，如何把里程和里程费输完后自动带出数量赋值给里程费合计

给里程和里程费添加input事件，输入处理合计

示例：

<template>
  <div>
    <div
      class="item"
      v-for="(item, index) in list"
      :key="index">
      <div>
        <el-input v-model="item.mileage" placeholder="里程" @input="val => inputMileage(val, item, index)"></el-input>
      </div>
      <div>
        <el-input v-model="item.mileageFee" placeholder="里程费" @input="val => inputMileageFee(val, item, index)"></el-input>
      </div>
      <div>
        <el-input v-model="item.sum" placeholder="合计"></el-input>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        { mileage: '', mileageFee: '', sum: '' },
        { mileage: '', mileageFee: '', sum: '' },
        { mileage: '', mileageFee: '', sum: '' },
        { mileage: '', mileageFee: '', sum: '' },
        { mileage: '', mileageFee: '', sum: '' },
        { mileage: '', mileageFee: '', sum: '' }
      ]
    }
  },
  methods: {
    inputMileage (val, item, index) {
      if (item.mileageFee) {
        item.sum = Number(val) * Number(item.mileageFee)
      }
    },
    inputMileageFee (val, item, index) {
      if (item.mileage) {
        item.sum = Number(val) * Number(item.mileage)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  align-items: center;
}
</style>

你想要怎么计算里程费合计呢？如果想加的话直接用computed计算属性将里程和里程费想加就行

【以下回答由 GPT 生成】

可以通过使用计算属性来实现在Vue.js中自动计算里程费合计的功能。在data中添加一个计算属性totalMileageFee，并在calculateTotalMileageFee方法中进行计算。以下是修改后的代码：

<template>
  <div class="container">
    <el-form v-for="(feeItem, index) in formData.feeList" :key="index">
      <el-col :span="7">
        <el-form-item :label="'里程' + (index+1)" :prop="'feeList[' + index + '].mileage'" :rules="mileageRules">
          <el-input v-model="feeItem.mileage" placeholder="请输入里程"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="7">
        <el-form-item :label="'里程费（KM）'" :prop="'feeList[' + index + '].mileageFee'" :rules="mileageFeeRules">
          <el-input v-model="feeItem.mileageFee" placeholder="请输入里程费（KM）"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="7">
        <el-form-item :label="'里程费合计'" :prop="'feeList[' + index + '].totalMileageFee'" :rules="totalMileageFeeRules">
          <el-input v-model="feeItem.totalMileageFee" disabled></el-input>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        feeList: []
      },
      mileageRules: [
        { required: true, message: '里程不能为空', trigger: 'blur' }
      ],
      mileageFeeRules: [
        { required: true, message: '里程费（KM）不能为空', trigger: 'blur' }
      ],
      totalMileageFeeRules: [
        { required: true, message: '里程费合计不能为空', trigger: 'blur' }
      ]
    }
  },
  computed: {
    totalMileageFee() {
      let totalFee = 0;
      for (let i = 0; i < this.formData.feeList.length; i++) {
        const feeItem = this.formData.feeList[i];
        totalFee += feeItem.mileage * feeItem.mileageFee;
      }
      return totalFee;
    }
  },
  watch: {
    'formData.feeList': {
      handler: function(val, oldVal) {
        // 不再需要在watcher中手动调用计算函数
      },
      deep: true
    }
  }
}
</script>

通过上述修改后的代码，当输入里程和里程费时，totalMileageFee计算属性将自动更新，并且可以将该值赋值给对应的表单字段进行显示。

【相关推荐】

你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7632016

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^