vue el-form 添加 v-if之后,表单校验不生效问题
问题描述
el-form 校验对象通过v-if控制,点击提交,表单未对其添加校验,没有填写数据必填校验就通过了
原因
- 使用 v-if:element ui 在对form表单中带有prop属性的子组件进行校验规则绑定时,是在vue声明周期mounted完成的。而v-if用来切换的元素是会被销毁的,导致了v-if内的表单项,由于在mounted时期没有进行渲染,所以规则也没有绑定上,因此初始化时不符合显示条件的不会生成规则,导致后面切换条件,显示的输入框的校验不会生效。
- 使用 v-show:初始化时会生成所有的规则,v-show只是css层面隐藏,其dom元素还在,即使隐藏了也会进行规则校验。
解决方法
给设置 v-if 的元素加上 key 值,如下所示:
<el-form-item prop="name" :key="name" label="名称" required></el-form-item>
vue 如何对表格进行校验
问题描述
校验表格的表单
解决方法
el-table-column里面套el-form-item
<el-table-column label="预售价" min-width="60" v-if="detail.salesType">
<template slot-scope="scope">
<el-form-item :prop="'productList.' + scope.$index + '.presalePrice'" :rules="rules.presalePrice" :key="'productList.' + scope.$index + '.presalePrice'">
<el-input v-model="scope.row.presalePrice"/>
</el-form-item>
</template>
</el-table-column>
指定校验规则 :rules=“rules.presalePrice”
data() {
return {
rules: {
presalePrice: [
{ required: true, message: '请输入', trigger: 'change' }
],
},
}
}
示例
<el-form :key="tableKey" ref="productForm" :model="detail" :rules="rules">
<el-table :data="detail.productList" row-key="id">
<el-table-column :label="ID" min-width="80" prop="id"></el-table-column>
<el-table-column label="销售价" min-width="40">
<template slot-scope="scope">
<el-form-item>
<el-input v-model="scope.row.originPrice" size="mini" :maxlength="30" disabled />
</el-form-item>
</template>
</el-table-column>
<el-table-column label="预售价" min-width="60" v-if="detail.salesType">
<template slot-scope="scope">
<el-form-item :prop="'productList.' + scope.$index + '.presalePrice'" :rules="rules.presalePrice" :key="'productList.' + scope.$index + '.presalePrice'">
<el-input v-model="scope.row.presalePrice" :oninput="`this.value = value.replace(${$Pattern.int}, '')`" @blur="scope.row.presalePrice = $event.target.value" size="mini" :maxlength="6" />
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
data() {
return {
rules: {
presalePrice: [
{ required: true, message: '请输入', trigger: 'change' }
],
presaleStock: [
{ required: true, message: '请输入', trigger: 'change' }
],
},
}
}
this.$refs.productForm.validate(valid => {})