vue el-form-item 根据数据进行动态显示

在Vue.js中，`el-form-item` 是 Element UI 中的一个用于表单验证的组件，它能够根据数据动态地渲染表单字段。当你有一个数组或者对象的数据源，并且其中包含不同类型的数据，例如需要展示不同的输入类型（如文本、选择、日期等），你可以通过 `v-for` 指令和条件渲染（`v-if` 或 `v-show`）来动态生成`el-form-item`。

举个例子：

<template>
  <el-form :model="form" :inline="true">
    <el-form-item v-for="(item, index) in formData" :key="index">
      <label>{{ item.label }}</label>
      <el-input type="text" v-if="item.type === 'text'" v-model="form[item.name]"></el-input>
      <!-- 更换其他元素如 select, date-picker 等 -->
      <el-select v-if="item.type === 'select'" v-model="form[item.name]">
        <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {}, // 表单初始数据
      formData: [], // 需要动态展示的数据数组
      options: [], // 选项数据
    };
  },
};
</script>

在这个例子中，`formData` 数组里的每个对象都有一个 `type` 属性，根据这个属性值，我们动态地选择了适当的输入组件。当数据源发生变化时，对应的`el-form-item` 就会相应地更新显示内容。