当表单填写时，实时监听输入的数据，当不相等时，提醒，且无法提交

输入时校验

javascript 复制代码

<template>
  <el-form :model="temp">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="服务台数" prop="equipmentNumber">
          <el-input v-model="temp.equipmentNumber" @input="checkEquipmentNumber" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="进口设备数量" prop="importNumber">
          <el-input v-model="temp.importNumber" @input="checkEquipmentNumber" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="国产设备数量" prop="domesticNumber">
          <el-input v-model="temp.domesticNumber" @input="checkEquipmentNumber" />
        </el-form-item>
      </el-col>
      <!-- 其他表单内容 -->
      <el-form-item>
        <el-button type="primary" :disabled="!isSubmitDisabled" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-row>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      temp: {
        equipmentNumber: '',
        importNumber: '',
        domesticNumber: ''
      },
      isSubmitDisabled: false // 是否禁用提交按钮
    };
  },
  methods: {
    checkEquipmentNumber() {
      this.temp.equipmentNumber = Number(this.temp.equipmentNumber);
      this.temp.importNumber = Number(this.temp.importNumber);
      this.temp.domesticNumber = Number(this.temp.domesticNumber);

      if (this.temp.equipmentNumber !== this.temp.importNumber + this.temp.domesticNumber) {
        this.$message.error('服务台数应等于国产设备数量与进口设备数量之和');
        this.isSubmitDisabled = true;
      } else {
        this.isSubmitDisabled = false;
      }
    },
    submitForm() {
      // 提交表单逻辑...
    }
  }
};
</script>

上述代码中，我们添加了@input="checkEquipmentNumber"事件监听器到每个输入框，每当输入值发生变化时会触发该方法进行校验。同时，我们通过isSubmitDisabled变量控制提交按钮是否禁用。如果设备数量不符合条件，则显示错误信息并禁用提交按钮。

离开时校验

当想需要的是当输入并且鼠标离开时

如果你想在用户输入后点击或鼠标离开输入框时再进行验证，可以使用blur事件代替input事件。以下是修改后的代码：

javascript 复制代码

<template>
  <!-- ...其他代码不变... -->
  <el-form-item label="服务台数" prop="equipmentNumber">
    <el-input v-model="temp.equipmentNumber" @blur="checkEquipmentNumber" />
  </el-form-item>
  <el-form-item label="进口设备数量" prop="importNumber">
    <el-input v-model="temp.importNumber" @blur="checkEquipmentNumber" />
  </el-form-item>
  <el-form-item label="国产设备数量" prop="domesticNumber">
    <el-input v-model="temp.domesticNumber" @blur="checkEquipmentNumber" />
  </el-form-item>
  <!-- ...其他代码不变... -->
</template>

<script>
// ...其他js部分（data和methods）不变...
</script>

这样，每次用户离开这三个输入框时，都会触发checkEquipmentNumber函数进行验证。注意，如果用户没有离开输入框直接提交表单，此时可能不会执行最新的验证，所以在提交表单前也可以再次进行一次验证以确保数据正确性。