el-form动态表单验证

定义用于生成表单的json

const generateForm = ref([
  { key: 'name', label: '姓名', type: 'input'},
  { key: 'age', label: '年龄', type: 'input', },
  { 
  	key: 'sex', 
  	label: '性别', 
  	type: 'select', 
  	option: [{label:'女',value:'0'},{label:'男',value:'1'}] 
  },
])

定义表单绑定的值

const form = ref({})

定义表单校验规则

校验规则的key要与generateForm中每项的key相同

const rules = ref({
  'name':[{ required: true, message: '请输入姓名', trigger: 'blur' }]
})

页面代码

注意： 要在el-form-item标签绑定一下rules表单校验才能起效

<template>
  <el-form :model="form" :rules="rules">
    <template v-for="item in generateForm" :key="item.key">
      <el-form-item :label="item.label" :rules="rules[item.key]" :prop="item.key">
        
        <el-input v-if="item.type === 'input'" v-model="form[item.key]"></el-input>

        <el-select v-else-if="item.type === 'select'" v-model="form[item.key]">
          <el-option v-for="o in item.option" :value="o.value" :label="o.label"></el-option>
        </el-select>

      </el-form-item>
    </template>
  </el-form>
</template>