elementUI form多类型表单验证

ps：rules除了自定义验证，其他常规的写法都长一样，不赘述。

一、最常用，配置在form中

直接在el-form中加入配置rules，在el-form-item中配置prop 但是这种写法对名称和结构要求比较高 一个form-item通过v-if判断隐藏，其验证也不会执行

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item v-if="false" label="活动时间" prop="time">
    <el-input v-model="ruleForm.time"></el-input>
  </el-form-item>
</el-form>

二、常用，配置在form-item中

直接在el-form-item中配置prop与rules，会更灵活一点，验证不用写在同一个rules中，而且同个rules.name也可以用在不同的el-form-item中

<el-form :model="ruleForm" ref="ruleForm" label-width="100px">
  <el-form-item label="活动名称"  prop="name" :rules="rules.name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
</el-form>

三、form表格验证

这也是常见情况...其实算是第二种的延伸吧

<el-form ref="form" :model="form" label-width="150px">
  <!-- 这里的prop和rules都是验证表格的，我这里的需求是表格不能为空 -->
  <el-form-item label="加工费用" prop="list" :rules="rules.list">
        <!-- 表格数据 -->
        <el-table :data="form.list" border highlight-current-row  style="width: 1000px;">
          <el-table-column label="工序名称" prop="processName">
            <template slot-scope="scope">
             <!-- 这里是表格内的输入框验证，首先prop要定位到当前行的这列数据，而且不需要form.开头，只需要从table的数据源list开始 -->
              <el-form-item :prop="`list[${scope.$index}].processName`" :rules="rules.processName">
                <el-input v-model="scope.row.processName" :maxlength="10" style="width: 100%;" />
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
</el-form>