AVUE コンポーネントまたは el-form がルール検証ルールを動的に変更する
問題の説明
条件に従って検証ルールを変更します: el-form で A が空の場合、B も空にすることができます。A に値がある場合、B は必須です。B の検証ルールを動的に変更します。
問題解決の原則
脱ぐ:
watch listen イベントでは、auve-form に付属する :defaults.sync="defaults" 属性を使用して、B のルール検証ルールを操作します。この記述方法の効果は、el-form ネイティブの場合よりも優れています。必須フラグ*になります
エルフォーム:
ウォッチを使用して A の値の変化を監視します。A が空でない場合は、B (Taiwan Balm) の検証ルールを操作します。
ヒント: ラジオ ボタンの選択コンポーネントを使用する場合は、@ で B の検証ルールを操作することもできます。ラジオボタンの変更イベント(特殊)
コードは以下のように表示されます
Avue コンポーネント内:
//此处用applyType指代a ,taxNumber 指代B
<avue-form :defaults.sync="defaults" v-model="modifyForm" :option="modifyOption" @submit="modificationSubmission"></avue-form>
...
data(){
return{
defaults:{
},
//avue配置项
modifyOption: {
submitText:'修改申报',
menuPosition:'right',
size:"mini",
labelWidth:150,
emptyBtn:false,
column: [
{
label: '申报类型',
prop: 'applyType',
type: 'radio',
span:24,
rules: [{
required: true,
message: "请选择申报类型",
trigger: "blur"
}],
dicData: radioList
}]
}
}
}
...
watch:{
'modifyForm.applyType'(val){
if(val=== null || val === undefined || val === ''){
//此处绑定的rules规则参考默认绑定rules
this.defaults.taxNumber.rules = [
{
required: false,
validator: validateCode1,
trigger: "blur"}
]
}else{
this.defaults.taxNumber.rules = [
{
required: true,
validator: validateCode1,
trigger: "blur"}
]
}
}
el-form ネイティブ コンポーネントの場合:
<el-form ref="ruleForm" :rules="rules" :model="form" label-width="220px">
<el-form-item label="申报园区:" prop="applyPark">
<el-select v-model="form.applyPark" placeholder="请选择" @change="changeApplyPark">
<el-option
v-for="item in applyList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="社会统一信用代码:" prop="taxNumber">
<el-input v-model="form.taxNumber"></el-input>
</el-form-item>
</el-form>
...
export default{
data(){
return{
applyList :[{
label:'公司',
value:0
},{
label:'分公司',
value:1
}],
//rules中要先声明一个不必填,否则下面的this.rules.taxNumber取不到
rules: {
applyPark: [
{
required: true, message: "请选择申报类型", trigger: "blur"},
],
taxNumber: [
{
required: false, message: "请输入社会统一信用代码", trigger: "blur"},
],
}
}
},
methods:{
changeApplyPark(){
if(this.form.applyPark === null || this.form.applyPark === undefined || this.form.applyPark === ''){
this.rules.taxNumber = [
{
required: false, message: "请输入社会统一信用代码", trigger: "blur"}
]
}else{
this.rules.taxNumber = [
{
required: true, message: "请输入社会统一信用代码", trigger: "blur"}
]
}
}
}
}