vue+element 表单动态改变rules属性
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
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 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)