element-ui使用v-for循环el-form-item 写一个组件

以下是一个使用element-ui的v-for循环el-form-item的组件代码示例：

<template>
  <el-form>
    <el-form-item v-for="(field, index) in fields" :key="index" :label="field.label">
      <el-input v-model="field.value" :placeholder="field.placeholder"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    fields: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
};
</script>

在上述代码中，我们使用了一个props属性来接收一个名为fields的数组，该数组中包含了每个表单项的label、placeholder和value属性。我们使用v-for循环该数组，并将其作为el-form-item的子组件，每个el-form-item包含了一个el-input组件，用于输入表单项的值。最后，我们将整个表单包裹在一个el-form组件中。

使用该组件时，我们只需要传递一个包含所有表单项的数组即可：

<template>
  <my-form :fields="fields"></my-form>
</template>

<script>
import MyForm from "@/components/MyForm.vue";

export default {
  components: {
    MyForm,
  },
  data() {
    return {
      fields: [
        {
          label: "姓名",
          placeholder: "请输入姓名",
          value: "",
        },
        {
          label: "邮箱",
          placeholder: "请输入邮箱",
          value: "",
        },
        {
          label: "电话",
          placeholder: "请输入电话",
          value: "",
        },
      ],
    };
  },
};
</script>

在上述代码中，我们引入了刚才创建的MyForm组件，并将fields数组传递给该组件的props属性。fields数组中包含了三个表单项，分别是姓名、邮箱和电话。我们可以通过该组件来快速创建包含多个表单项的表单。