vue3+element-plus 封装表单_vue3 element-plus 表单的封装-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_50041614/article/details/126701612

本文介绍了如何在Vue3项目中结合Element-Plus库封装自定义表单组件，包括组件的创建、注册和使用方法。通过设置不同类型如输入框、下拉框，并展示了如何绑定下拉框的选项数组。此外，还讲解了如何自定义按钮的文字和状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.封装需要的组件


<template>
  <div class="i-form">
    <el-form
      :ref="formRef"
      :model="model"
      :rules="rules"
      :inline="inline"
      :label-width="labelWidth"
      :label-position="labelPosition"
      :style="formWidth"
    >
      <slot name="head" />
      <el-form-item
        v-for="(item, index) in elem"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :label-width="item.labelWidth"
        :style="item.width"
      >
        <!-- 输入框 -->
        <el-input
          v-if="!item.element"
          clearable
          :type="item.type"
          v-model="model[item.prop]"
          :placeholder="item.placeholder"
          :size="item.size"
          :disabled="item.disabled"
          :readonly="item.readonly"
          :icon="item.icon"
          :prefix="item.prefix"
          :suffix="item.suffix"
          :number="item.number"
          :rows="item.rows"
          :autosize="item.autosize"
          :style="item.elemWidth"
        />
        <!-- 数字输入框 -->
        <el-input-number
          v-if="item.element === 'number'"
          :max="item.max"
          :min="item.min"
          v-model="model[item.prop]"
          :placeholder="item.placeholder"
          :size="item.size"
          :disabled="item.disabled"
          :style="item.elemWidth"
        />
        <!-- 下拉框选择器 -->
        <el-select
          v-if="item.element === 'select'"
          clearable
          v-model="model[item.prop]"
          :placeholder="item.placeholder"
          :size="item.size"
          :disabled="item.disabled"
          :filterable="item.filterable"
          :mu