vue + element,v-if和validate搭配出坑
vue + element前端常用搭配今天遇到个问题el-form的验证出现个别参数不能验证,代码如下<el-dialog title="创建审批配置" :visible.sync="dialogVisible" class="tems_dialog" width="780px" :close-on-cl
·
vue + element前端常用搭配
今天遇到个问题el-form的验证出现个别参数不能验证,代码如下
<el-dialog title="创建审批配置" :visible.sync="dialogVisible" class="tems_dialog" width="780px" :close-on-click-modal="false" :show-close="false">
<el-form :model="formData" :rules="rules" ref="formValidate" label-width="100px" style="display: flex;flex-wrap:wrap;">
<!-- 任务类型 -->
<el-form-item prop="taskType" label="任务类型">
<el-select size="small" class="tems_Input comment-width" clearable v-model="formData.taskType">
<el-option v-for="item in taskType" :key="item.id" :value="item.id" :label="item.name" />
</el-select>
</el-form-item>
<el-form-item v-if="formData.taskType === 0 && formData.taskType !==''" prop="equipmentType" label="设备类型">
<el-select size="small" class="tems_Input comment-width" clearable v-model="formData.equipmentType">
<el-option v-for="item in equipmentTypeList" :key="item.id" :value="item.id" :label="item.name" />
</el-select>
</el-form-item>
</el-form>
第二个的显示根据第一个的选择结果判断显示与否,结果在提交的时候无法判断第二个select的值,找了好多都没有解决办法,根据vue和element的源码了解,大概是v-if在操作dom的时候,在根节点进行的删减,而element在封装的时候没考虑这块,导致rules判断的时候,无法取到v-if添加进来的prop值
解决办法
<div v-if="formData.taskType === 0 && formData.taskType !==''" >
<el-dialog title="创建审批配置" :visible.sync="dialogVisible" class="tems_dialog" width="780px" :close-on-click-modal="false" :show-close="false">
<el-form :model="formData" :rules="rules" ref="formValidate" label-width="100px" style="display: flex;flex-wrap:wrap;">
<!-- 任务类型 -->
<el-form-item prop="taskType" label="任务类型">
<el-select size="small" class="tems_Input comment-width" clearable v-model="formData.taskType">
<el-option v-for="item in taskType" :key="item.id" :value="item.id" :label="item.name" />
</el-select>
</el-form-item>
<el-form-item prop="equipmentType" label="设备类型">
<el-select size="small" class="tems_Input comment-width" clearable v-model="formData.equipmentType">
<el-option v-for="item in equipmentTypeList" :key="item.id" :value="item.id" :label="item.name" />
</el-select>
</el-form-item>
</el-form>
</div>
这样就解决了,但是具体原理,不怎么了解,知道的大神可以帮忙解答下么?
更多推荐
已为社区贡献7条内容
所有评论(0)