<template>
  <el-form :model='form' ref='form' label-width='120px'>
    <el-form-item label='免税收入:' prop='taxExemptIncome'>
      <el-input
        v-model='form.taxExemptIncome'
        placeholder='请输入免税收入'
        :disabled='isEditing'
        clearable
      />
    </el-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        form: {
          taxExemptIncome: ''
        },
        isEditing: false
      };
    },
    methods: {
      validateForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            // 表单校验通过
            // 可以在这里进行其他操作
          } else {
            // 表单校验不通过
          }
        });
      }
    }
  };
</script>
<p>在上面的代码中,<code>taxExemptIncome</code> 是一个表单项的属性,可以通过 <code>v-model</code> 双向绑定到 <code>form.taxExemptIncome</code> 属性上。</p>
<p>要进行校验,可以使用 <code>this.$refs.form.validate</code> 方法,它会触发表单校验,并且在回调函数中返回校验结果。校验结果 <code>valid</code> 为 <code>true</code> 表示校验通过,为 <code>false</code> 表示校验不通过。根据校验结果,可以进行相应的操作。</p>
<p>另外,<code>isEditing</code> 是一个布尔值,用于控制输入框是否可编辑。如果设置为 <code>true</code>,则输入框将被禁用。</p>
Vue.js 中如何校验免税收入表单项 (taxExemptIncome)

原文地址: https://www.cveoy.top/t/topic/pk8Q 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录