vue+element 表单动态改变rules属性(根据下拉列表的选项来动态触发校验)

在这里插入图片描述当选择办公耗损(为1,字典生成)时,项目编号disabled (默认给请购单号);
当选择项目(为0,字典生成)时,项目编号要校验。

<el-col :span="12">
       <el-form-item label="项目类型" prop="projectType">
         <el-select v-model="form.projectType" placeholder="请选择项目类型" clearable @change="selectChanged"  style="width:100%;">
           <el-option v-for="dict in projectTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="parseInt(dict.dictValue)"></el-option>
         </el-select>
       </el-form-item>
     </el-col>
   </el-row>
   <el-row>
     <el-col :span="12">
       <el-form-item label="项目编号" prop="projectId">
         <el-input v-model="form.projectId" placeholder="请输入项目编号" :disabled="form.projectType == 1" />
       </el-form-item>
     </el-col>

rules: {
    projectType:[{required: true, message: "项目类型为选项", trigger: "change"}],
    projectId: [
      { required: true, message: "项目编号不能为空", trigger: "blur" },
    ],
  },

// 项目类型 选中值发生变化时触发
  selectChanged(value){
    console.log('项目类型value',value);
    if(this.form.projectType == 0){
      this.rules.projectType = [{required: true, message: "项目类型为选项", trigger: "change"}]
      this.rules.projectId = [{ required: true, message: "项目编号不能为空", trigger: "blur" }]
    }else{
      this.rules.projectId = []
    }
    this.$refs.form.clearValidate();
  },
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐