element-plus 渲染表单拼props

Element Plus是一个基于Vue.js的开源UI组件库，它提供了一套丰富的界面元素和组件，包括表单组件。在使用Element Plus构建表单时，通常会通过props（属性）来传递数据和配置选项。

当你需要渲染一个表单组件，例如`el-form`，你可以像这样操作：

<template>
  <el-form :model="formData" ref="formRef">
    <!-- 表单字段 -->
    <el-form-item label="姓名" prop="name">
      <el-input v-model="formData.name"></el-input>
    </el-form-item>
    <!-- 更多字段... -->
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: { name: '', email: '' }, // 初始化的数据
    };
  },
};
</script>

在这个例子中，`:model="formData"`表示这个表单组件的数据绑定到了`formData`对象上，你可以通过修改`formData`对象来动态更新表单内容。每个`<el-form-item>`中的`prop`属性对应的是数据模型中的一个属性名，比如`<el-input v-model="formData.name">`中的`prop="name"`告诉表单控件关联到`formData`中的`name`属性。

如果你想动态地拼接props，可以在组件内部接收一个props对象，并在模板中引用它们：

<template>
  <el-form :model="props.data" ref="formRef">
    <!-- 使用props提供的属性 -->
    <el-form-item :label="props.fieldLabel" :prop="props.fieldProp">
      <el-input v-model="props.data[props.fieldProp]"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    fieldLabel: String,
    fieldProp: String,
    data: Object, // 接收的动态表单数据
  },
};
</script>

在这种模式下，开发者可以根据传入的props值动态构建表单结构。