vue+elementui 動態改變表單必填項

需求：

當類別為“菜單”時的必填項：

當類別為“按鈕”時的必填項：

實現：

data里面定義：

isMenu: true

 

el-form里面設置rules：

<el-form-item prop="path" :rules="[{required:isMenu,message:'請輸入菜單路徑',trigger:'blur'}]" label="菜單路徑" :label-width="formLabelWidth">
<el-input v-model="dlgData.path" autocomplete="off"></el-input>
</el-form-item>

<el-form-item prop="icon":rules="[{required:isMenu,message:'請輸入菜單圖標',trigger:'blur'}]" label="菜單圖標" :label-width="formLabelWidth">
<icon-selector v-model="dlgData.icon" :data="iconOptions" />
</el-form-item>

<el-form-item prop="component":rules="[{required:isMenu,message:'請輸入路由組件',trigger:'blur'}]" label="路由組件" :label-width="formLabelWidth">
<el-input v-model="dlgData.component" autocomplete="off"></el-input>
</el-form-item>

 

methods里面定義：

chanRules(){
this.isMenu = (this.dlgData.type == 1 ? true : false)
}

 

watch里面定義：

watch: {
      'dlgData.type'(){
        this.$nextTick(() =>{
          this.chanRules()
        })
      }
    }

 

注：dlgData是由主界面傳過來的一個prop屬性

參考：https://blog.csdn.net/u012138137/article/details/103661557  感謝感謝！