本文详细介绍了在使用ElementUI时如何在表单中进行条件渲染，强调了使用v-if代替v-show的原因，并展示了动态表单验证的实现，包括选择系统、分类名称、用户选择等字段的验证规则。同时，文章提到了动态添加和删除表单元素的处理，以及在复杂嵌套结构中如何正确设置prop属性以确保校验生效。
在elementUi的 form表单中
总而言之:涉及表单条件渲染一律用v-if代替v-show
注意:1:v-mode 和 prop的值一致
2:el-select下拉框的v-mode相当于下拉框的value值 当v-model是个数组时，v-model是value集合的一位数组，不是一个数组对象，若错误的写成了一个数组对象，则会出现勾选重复的情况
动态表单的校验: 动态:控制变量法
<el-form :model="formValue" class="container" label-width="200px" v-loading="loading" ref="standardSetForm">
<el-form-item prop="name" label="选择系统" :rules="[
{ required: true, message: '请选择系统', trigger: 'blur' }
]" v-if="type=='second'">
<el-select v-model="formValue.name" placeholder="请选择系统" style="margin-right: 20px"
@change="selectSystem">
<el-option v-for="item in system" :key="item.code" :label="item.name" :value="item.code">
</el-option>
</el-select>
</el-form-item>
<el-form-item prop="maxDicId" label="分类名称" :rules="[
{ required: true, message: '请选择分类', trigger: 'blur' }
]">
<el-select v-model="formValue.maxDicId" placeholder="请选择分类" style="margin-right: 20px"
@change="selectOption">
<el-option v-for="item in classifyOptions" :key="item.id" :label="item.dicValue" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<!-- 员工名称 -->
<el-form-item label="选择用户" prop="selectedEpm" :rules="[
{ required: true, message: '请选择用户', trigger: 'blur' }
]" v-if="type=='first'">
<div v-if="pageModuleType === 'add'">
<el-button type="success" @click="showSelectUser()">选择用户</el-button>
<el-row>
<el-tag v-for="emp in this.formValue.selectedEpm" closable :key="emp.emplid"
@close="deleteEmp(emp)">
{{ emp.nameDisplay }}
</el-tag>
</el-row>
</div>
<div v-else>
<el-input v-model.trim="formValue.name" :disabled="true"></el-input>
</div>
</el-form-item>
<el-form-item :label="index == 0 ? '处理角色、细类、范围和模版' : ''" v-for="(item, index) in formValue.moudleList">
<!-- <div> -->
<el-card style="width: 1800px; margin-bottom: 20px">
<div slot="header" style="
display: flex;
justify-content: space-between;
align-items: center;
">
<div class="left">
<el-form-item :prop="'moudleList.' + index + '.priority'" label="处理角色" style="margin-left: -120px"
:rules="[
{ required: true, message: '请选择处理角色', trigger: 'blur' }
]">
<el-select v-model="item.priority" placeholder="请选择处理角色">
<el-option v-for="item in roleList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</div>
<div class="right">
<el-button type="primary" plain @click="addModule(0,item)">新增同角色配置</el-button>
</div>
</div>
<el-form-item :prop="'moudleList.' + index + '.deptList'" label="处理范围" :rules="[
{ required: true, message: '请选择处理范围', trigger: 'blur' }
]" style="margin-left: -90px;margin-bottom:20px">
<div>
<el-button @click="addOrg(index)">点击添加</el-button>
</div>
<div v-show="item.deptList">
<div @click="addOrg" class="userBox">
<el-tag v-for="(tag, ind) in item.deptList" @close="closeOrgTag(tag, index,ind)"
:key="tag.deptId" closable>
{{ tag.name}}
</el-tag>
</div>
</div>
</el-form-item>
<el-form-item :prop="'moudleList.' + index + '.dicId'" label="细类"
style="margin-left: -90px;margin-bottom:20px" :rules="[
{ required: true, message: '请选择细类', trigger: 'blur' }
]">
<el-cascader ref="demoCascader" class="classifyList" v-model="item.dicId"
:options="classifyOptionsChild" :props="{
multiple: true,
checkStrictly: true,
children: 'childrens',
label: 'dicValue',
value: 'id'
}" @change="classifyChange($event,index)"></el-cascader>
</el-form-item>
<el-form-item :prop="'moudleList.' + index + '.newMultipleSelection'" label="请选择新建模板"
style="margin-left: -90px;margin-bottom:20px" :rules="[
{ required: true, message: '请选择新建模板', trigger: 'blur' }
]">
<el-select v-model="item.newMultipleSelection" multiple placeholder="请选择新建模板"
@focus="selectTemp(item.dicId,index,0)">
<el-option v-for="ele in item.newMoudle" :key="ele.id" :label="ele.name" :value="ele.id">
<span style="float: left">{{ ele.name }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ ele.applyClassification }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item :prop="'moudleList.' + index + '.turnMultipleSelection'" label="请选择转单模板"
style="margin-left: -90px;margin-bottom:20px" :rules="[
{ required: true, message: '请选择转单模板', trigger: 'blur' }
]">
<el-select v-model="item.turnMultipleSelection" multiple placeholder="请选择转单模板"
@focus="selectTemp(item.dicId,index,1)">
<el-option v-for="ele in item.turnMoudle" :key="ele.id" :label="ele.name" :value="ele.id">
<span style="float: left">{{ ele.name }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ ele.applyClassification }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item :prop="'moudleList.' + index + '.handleMultipleSelection'" label="请选择处理模板"
style="margin-left: -90px;margin-bottom:20px" :rules="[
{ required: true, message: '请选择处理模板', trigger: 'blur' }
]">
<el-select v-model="item.handleMultipleSelection" multiple placeholder="请选择处理模板"
@focus="selectTemp(item.dicId,index,2)">
<el-option v-for="ele in item.handleMoudle" :key="ele.id" :label="ele.name" :value="ele.id">
<span style="float: left">{{ ele.name }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ ele.applyClassification }}</span>
</el-option>
</el-select>
</el-form-item>
<div v-if="formValue.moudleList.length>1" style="float:right;margin-bottom:30px">
<el-button type="primary" plain @click="delModule(index)">删除</el-button>
</div>
</el-card>
<div v-if="index == formValue.moudleList.length - 1">
<el-button type="primary" plain @click="addModule(1)">新增角色配置</el-button>
</div>
</el-form-item>
<!-- 提交 -->
<el-form-item label="">
<el-row>
<el-col style="padding-bottom: 30px">
<el-button type="primary" @click="submitForm">保存</el-button>
<el-button @click="
() => {
$router.back(-1)
}
">返回
</el-button>
</el-col>
</el-row>
</el-form-item>
</el-form>
注意:
1:当validate、resetFields 的方法时，props属性是必填的,props与data中需要定义的model的键名一致，
2:data中需要定义model绑定的对应字段 否则validate、resetFields方法不会生效
3.不论el-form-item的组件是何种类型，只要满足1,2均可校验，不局限于el-elemntui的el-form常用那几种，如(自定义组织架构树也可以进行校验)
form: {
isArea: '0',
isGrade: '1',
period: '',
// eliminateHoliday: 0,
overLimit: '',
overUnit: '',
moudleArea: [{
areaDeptIds: [],
period: '',
overLimit: '',
eliminateHoliday: 0,
timeRangeList: [{
time: '',
}],
overtimeHandlerList: [{
overLimit: '',
}]
}],
},
3:特别要注意 . 的添加位置 ，至于为什么要这样写呢 (其实就是获取对象属性的方式===>通过.或者索引去获取)通过打印校验我们会发现以下得到的是类似这样的数据
moudleArea.0.overtimeHandlerList.0.overLimit
如果index和属性之间不加.去获取 则得到的是moudleArea.0overtimeHandlerList.0.overLimit这样 这样明显是错误的获取不到我们想要的属性
很简单的却也是很容易忽略的地方
:prop="'moudleArea.' + index + '.overtimeHandlerList.'+ ind+ '.overLimit'"
4:当校验的内容中有条件渲染的时候，请将v-show换成‘v-if’，否则会导致v-show隐藏的部分不需要校验，但是页面提交时校验结果一直为false
动态校验规则写法
写法一
在标签处写rule校验逻辑
<el-form-item
label=""
:prop="'multiConditions.' + index + '.conditions.' + ind + '.value'"
v-if="ele.field == 'FINAL_SCORE'"
:rules="[{ validator: validateFinalScore, trigger: 'change' }]"
>
<el-input-number
v-model="ele.value"
placeholder="支持填写数字"
style="width: 180px"
/>
</el-form-item>
写法二
在数据层定义规则
<el-form-item
:prop="'baseConditionList.' + index + '.compareToTargetValueStep'"
:rules="dataRules.compareToTargetValueStep"
>
<el-input
v-model="item.compareToTargetValueStep"
controls-position="right"
style="width: 70px"
/>
</el-form-item>
const dataRules = reactive<ElRules>({
scoreLimit: [{ validator: validateValue, trigger: 'change' }],
compareToTargetValueStep: [{ validator: validateValue, trigger: 'change' }],
score: [{ validator: validateValue, trigger: 'change' }],
stepScore: [{ validator: validateValue, trigger: 'change' }],
scoreUpperLimit: [{ validator: validateValue, trigger: 'change' }],
scoreLowerLimit: [{ validator: validateValue, trigger: 'change' }],
})
前提:
扫一扫
1067
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
