收入费用计算器 - 自动计算费用

<template>
  <el-form :model="form" :rules="rules" ref="form" label-width="100px">
    <el-form-item label="收入:" prop="income" style="margin-left: -5px">
      <el-input v-model.number="form.income" placeholder="请输入收入" clearable @input="caltaxExemptIncome"></el-input>
    </el-form-item>
    <el-form-item label="费用：" prop="cost" style="margin-left: -40px">
      <el-input v-model.number="form.cost" placeholder="请输入费用" :disabled="isEditing" clearable @input="caltaxExemptIncome"></el-input>
    </el-form-item>
    <el-form-item label="免税收入:" prop="taxExemptIncome">
      <el-input v-model="form.taxExemptIncome" placeholder="请输入免税收入" :disabled="isEditing" clearable></el-input>
    </el-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        form: {
          income: null,
          cost: null,
          taxExemptIncome: null
        },
        rules: {
          income: [
            { required: true, message: '请输入收入', trigger: 'blur' },
            { type: 'number', message: '收入必须为数字值', trigger: 'blur' }
          ],
          cost: [
            { required: true, message: '请输入费用', trigger: 'blur' },
            { type: 'number', message: '费用必须为数字值', trigger: 'blur' }
          ],
          taxExemptIncome: [
            { required: true, message: '请输入免税收入', trigger: 'blur' },
            { type: 'number', message: '免税收入必须为数字值', trigger: 'blur' }
          ]
        },
        isEditing: false
      };
    },
    methods: {
      caltaxExemptIncome() {
        if (this.form.income <= 4000) {
          this.form.cost = 800;
        } else {
          this.form.cost = this.form.income * 0.2;
        }
      }
    }
  };
</script>