elemenui 动态添加表单且校验必填

ElementUI是一个基于Vue.js的开源UI组件库，它提供了一套丰富的表格和表单组件。如果你想动态地向页面上添加表单元素，并确保某些字段是必填的，可以按照以下步骤操作：

1. 引入必要的Element UI表单组件：首先，在你的Vue项目中安装并引入`el-form`, `el-form-item`以及`v-model`等组件。

<script src="https://unpkg.com/@element-ui/core@latest/lib/index.js"></script>

2. 使用`v-for`循环动态创建表单项：你可以创建一个数组，其中包含表单的数据结构，然后在模板中遍历这个数组，每次迭代创建一个新的表单项。

<template>
  <div>
    <el-form ref="form">
      <template v-for="(item, index) in formData" :key="index">
        <el-form-item label="必填字段 {{ item.label }}">{{ item.name }} <el-required :message="requiredMessage"></el-required></el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: [
        { name: '姓名', label: 'Name' },
        // 更多表单字段...
      ],
      requiredMessage: '此项内容不能为空',
    };
  },
};
</script>

3. 利用`required`属性和自定义验证消息：在每个必填字段上使用`el-required`指令，传入一个`message`属性，设置当字段为空时显示的错误信息。

4. 验证表单：当你需要全局验证整个表单时，可以在提交按钮上绑定表单的`validate()`方法。如果某一项是必填且未填写，该方法将返回`false`，阻止表单提交。

<button @click="submitForm">提交</button>

<script>
methods: {
  submitForm() {
    this.$refs.form.validate((valid) => {
      if (valid) {
        // 表单验证通过，执行提交操作
      } else {
        console.log('表单中有必填项未填写');
      }
    });
  },
},
</script>