el-form-item prop 动态添加

`el-form-item` 和 `prop` 都是来自 Element UI 的 Vue.js 组件库，用于构建用户界面。这里，我们讨论的是如何动态地为表单字段添加 `el-form-item` 组件及其对应的属性绑定。

### **`el-form-item` 组件简介**

`el-form-item` 主要用于封装输入字段，并允许你将一些通用的功能如错误信息提示、验证规则等应用到该组件上。它通常包含以下几个关键属性：

- `label`：设置输入字段的标题。
- `prop`：绑定数据到 Vue 实例的一个属性名。
- `rules`：定义表单验证规则。
- `modelValue`：绑定数据值，当值变化时触发事件。

### **动态添加 `el-form-item`**

要在 Vue 应用中动态创建 `el-form-item` 组件并基于某个条件添加它们，你可以利用 Vue 的 `v-for` 指令。假设你有一个数组，其中包含了需要显示的表单项的信息（例如，每个元素可以包括表单标题、关联的属性名称以及是否启用的布尔值），你可以这样做：

<template>
  <el-form ref="form">
    <div v-for="(item, index) in formItems" :key="index">
      <!-- 动态生成表单项 -->
      <el-form-item label=" {{ item.label }}" :prop="item.prop" :rules="item.rules"
                    v-if="item.enabled">
        <el-input v-model="formData[item.prop]" placeholder="请输入内容"></el-input>
      </el-form-item>
    </div>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formItems: [
        { label: '姓名', prop: 'name', enabled: true },
        { label: '邮箱', prop: 'email', enabled: false }, // 示例禁用一项
        { label: '电话', prop: 'phone', enabled: true }
      ],
      formData: {
        name: '',
        email: '',
        phone: ''
      }
    };
  },
  methods: {}
}
</script>

在这个示例中：

1. `formItems` 数组包含了我们需要动态创建的 `el-form-item` 的配置信息，包括标签文本 (`label`)、属性路径 (`prop`) 和启用状态 (`enabled`)。
2. `v-for` 指令遍历数组，根据 `enabled` 属性值来决定是否渲染每一项。
3. 使用 `:prop` 动态绑定表单字段的数据源，使用 `:rules` 动态绑定验证规则，这些都是标准的 Vue 数据绑定语法。
4. `v-model` 确保输入框的值与数据模型保持同步。

###