vue-表单验证问题

vue el-form 添加 v-if之后，表单校验不生效问题

问题描述

el-form 校验对象通过v-if控制，点击提交，表单未对其添加校验，没有填写数据必填校验就通过了

原因

1. 使用 v-if：element ui 在对form表单中带有prop属性的子组件进行校验规则绑定时，是在vue声明周期mounted完成的。而v-if用来切换的元素是会被销毁的，导致了v-if内的表单项，由于在mounted时期没有进行渲染，所以规则也没有绑定上，因此初始化时不符合显示条件的不会生成规则，导致后面切换条件，显示的输入框的校验不会生效。
2. 使用 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 => {})