Element 动态增减表单项+自定义校验规则

使被遍历的每条数据都被校验，效果图例如：

上图仅作参考，非下面代码的运行图。

html：核心代码就是 :prop 和 :rules 的定义

<el-form-item label="IP白名单列表：" :rules="[{ required: true }]">
	<div v-for="(item, index) in editForm.list" :key="index">
		<el-form-item :prop="`list.${index}.tel`" :rules="editRules.tel">
			<el-input v-model="item.tel" placeholder="请留下联系方式"></el-input>
		</el-form-item>
	</div>
</el-form-item>

js：

export default {
    data() {
    
		 // 电话号码-校验规则:
      	const validateTel = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请留下联系方式'))
        } else {
          let reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
          if (reg.test(value) == true) {
          // 对：
            callback()
          } else {
          // 错：
            callback(new Error('请留下正确的联系方式'))
          }
        }
      }

      	return {
			editForm: {
				list: [{ tel: '120', name: '急救' },{ tel: '119', name: '火警' }]
			},
			editRules: {
				 tel: [{ validator: validateTel, trigger: 'change' }],
			}
		}
	}
}

关于 Cascader 级联选择器 的校验

效果如下：

示范代码：

		<el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          :validate-on-rule-change="false"
        >
          <el-form-item label="综合服务主体：" prop="servicePrincipal">
            <el-cascader
              v-model="ruleForm.servicePrincipal"
              placeholder="请选择综合服务主体"
              :options="serviceValue"
              :props="{ expandTrigger: 'hover', value: 'id', label: 'name' }"
              :show-all-levels="false"
              clearable
              @change="servicePrincipalChange"
            ></el-cascader>
          </el-form-item>
		</el-form>

		data() {
			return {
				serviceValue: [], // 综合服务主体列表
				ruleForm: {
					servicePrincipal: [], // 选中的综合服务主体
				},
				rules: {
					servicePrincipal: [
			            {
			              type: 'array',
			              required: true,
			              message: '请选择综合服务主体',
			              trigger: 'change',
			            },
			    	],
				}
			}
		}

注意点：

• 由于后端返回数据的属性名为 id 和 name，而 ElementUI 的级联选择器只能通过 value 和 label 来渲染数据，所以我们在 prop 中进行了转换。
• ElementUI 的级联选择器校验规则出加上了 type: 'array'，虽说不加也能进行校验，但写上还是能避免某些情况下出现 bug。