持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第18天，点击查看活动详情

获奖感言

哈哈哈哈，今天收到了掘金送的太空人，非常开心，还能发光，太nice了

微信图片_20220625214753.jpg

为什么要封装表单组件

封装后的表单组件可以直接在别的组件中使用，甚至在别的项目中也可以直接拿来用
我们可以直接传给表单配置文件，就可以生成对应的组件
省时省力省心，为什么不封装呢

封装一个简易的表单组件

技术我们选用element-plus+vue3 实现我们给组件传入一个参数，它可以通过参数自动生成对应的表单，本次只生成表单，下次美化表格加细节

引用element-plus + 创建对应文件夹

文件结构如下

文件结构.png

base-ui存放我们的表单组件 base-ui-->index.js负责导出我们封装的表单组件

base-ui-->index.js中

import Form from '../base-ui/form/form.vue'
export default Form

封装一个input组件

因为我们是全局引用的element-plus组件，所以直接在template标签中使用element-plus标签

<el-form label-width="120px">
  <el-row>
      <el-col :span="8">
          <el-form-item>
            <el-input></el-input>
          </el-form-item>
       <el-col/>
  </el-row>
</el-form>

这样一个简易的input表单就出现了

优化

我们希望传递给form组件一个参数，让他根据这个参数自动生成对应的组件，首先制定参数类型我们希望他是一个数组，数组里面放对象，

type：表单类型，
placeholder表单框内默认显示，
label：表单的文本，
otherOptions：其他配置，
如果是select表单，还需要options 这些属性type、placeholder、label必选，其他可选

类似于这样

[
  {
    type: "",
    placeholder: "",
    label: "",
    otherOptions: [
      {
        start-placeholder: "",
        end-placeholder: "",
      },
    ],
  },
];

表单的类型

我们不可能只有一个input表单，我们还需要很多，先配置这个传来一个数组之后，遍历数组，判断type，用v-if生成对应类型的表单

<el-form label-width="120px">
  <el-row>
    <template v-for="item in formItemOptions" :key="item.label">
      <el-col :span="8">
        <template v-if="item.type === 'input' || item.type === 'password'">
          <el-form-item :label="item.label">
            <el-input :placeholder="item.placeholder"></el-input>
          </el-form-item>
        </template>
        <template v-if="item.type === 'select'">
          <el-form-item :label="item.label">
            <el-select :placeholder="item.placeholder">
              <el-option
                v-for="option in item.options"
                :key="option.label"
                >{{ option.label }}</el-option
              >
            </el-select>
          </el-form-item>
        </template>
        <template v-if="item.type === 'datePicker'">
          <el-form-item :label="item.label">
            <el-date-picker
              v-bind="item.otherOptions"
              :placeholder="item.placeholder"
            ></el-date-picker>
          </el-form-item>
        </template>
      </el-col>
    </template>
  </el-row>
</el-form>

当然，配置文件也要写好

const formItemOptions = [
  {
    type: "input",
    label: "id",
    placeholder: "请输入id",
  },
  {
    type: "password",
    label: "请输入密码",
    placeholder: "请输入密码",
  },
  {
    type: "select",
    label: "请选择喜欢的运动",
    placeholder: "请选择喜欢的运动",
    options: [
      {
        label: "篮球",
        value: "basketball",
      },
      {
        label: "足球",
        value: "ball",
      },
    ],
  },
  {
    type: "datePicker",
    placeholder: "请选择日期",
    label: "请选择日期",
    otherOptions: [
      {
        startPlaceholder: "请输入开始日期",
        endPlaceholder: "请输入结束日期",
      },
    ],
  },
];

from表单中

app文件中

下次继续

这样，我们的form表单就完成了最基本的封装，但是还不能输入值，因为还没有绑定，明天继续，加油

VUE封装高阶表单