动态 el-form-item 并获取form的值

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item
      v-for="(item, index) in formItems"
      :key="index"
      :label="item.label"
      :prop="item.prop"
      :rules="{
          required: true, message: '请输入', trigger: 'blur'
      }"
    >
      <el-input v-model="form[item.prop]" />
    </el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {},
      formItems: [
        { label: '姓名', prop: 'name' },
        { label: '年龄', prop: 'age' },
      ],
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log('表单验证通过，提交的数据为：', this.form);
        } else {
          console.log('表单验证失败！');
          return false;
        }
      });
    },
  },
};
</script>