要素UIフォームフォームの動的ルール検証

Vue プロジェクトでは、どのオプションが選択され、動的に表示または無効化されるかなど、要素 UI フォームの動的ルール検証が使用されることがあります。
element-ui フォーム内の form-item の検証ルールを巧みに使用して、これを処理できます (各 form-item は個別に検証できます)。ここに画像の説明を挿入

上記のコード:

<el-form-item
          label="3、属于以下何种优先配售类型(单选,符合以下条件之一即属于优先配售范围)"
          prop="yxpslx"
          :rules="sqyxForm.jtpslx == '0' ? { required: true, message: '请选择', trigger: 'change'} : {}"
          label-width="600px"
          style="display:flex; flex-direction: column;"
          class="elformitem3"
          
        >
          <el-radio-group v-model="sqyxForm.yxpslx" :disabled="sqyxForm.jtpslx ==1" @change="changeYxpsRadio">
            <el-radio label="0" class="mb10" :disabled="sqyxForm.jtsgry == '0' && sqyxForm.jtpslx == '0'">A.夫妻双方均符合共有产权住房申购条件且共同申购</el-radio
            ><br />
            <el-radio label="1" class="mb10" :disabled="sqyxForm.jtsgry == 1">B.港澳青年</el-radio>
            <br />
            <el-radio label="2" class="mb10" :disabled="sqyxForm.jtsgry == 1">C.二孩以上家庭</el-radio>
            <br />
            <el-radio label="3" :disabled="sqyxForm.jtsgry == 1">D.经区政府批准的优先保障对象</el-radio>
          </el-radio-group>
        </el-form-item>

キーポイントは次のとおりです: :rules="sqyxForm.jtpslx == '0' ? { required: true, message: 'Please select', トリガー: 'change'} : {}" sqyxForm.jtpslx == '0' これis
me 上記のオプションは動的に表示または無効にすることができ、無効にすると検証は行われません。

おすすめ

転載: blog.csdn.net/weixin_45849417/article/details/131898432