开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第15天，点击查看活动详情

了解基本元素

我们在封装前，先了解一下表单域中各种类型的表单控件 包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker 老样子，我们新建文件夹等一系列操作

<template>
    <a-form></a-form>
</template>
<script>
export default {
    name: "Home",
  components: {
    "a-form": () => import("@/components/form/index"),
  },
}
</script>

接下来利用Element的form表单来进行二次封装，具体一些引入的问题，看前面的文章有，具体就不细说了

<template>
    <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
</template>
<script>
export default {
    name: 'Form',
     data() {
      return {
        form: {
          name: '',
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
}
</script>

视图就已经出来了，最基础的我们就先了解一下

定义item渲染表单项

通过item将自定义的数据传给组件

 <a-form :item="form_item"></a-form>

自定义的数据

  data() {
    return {
        form_item: [
            {type: 'input', label: "活动名称"},
            {type: 'select', label: "活动区域"}
        ]
    }
  }

组件props接受，接受后不要第一时间就在dom循环，先定义一个变量赋值，在去循环

    props: {
        item: {
            type: Array,
            default: ()=> []
        }
    },
     data() {
      return {
        form_item: [],
        form: {
          name: '',
        }
      }
    },
    beforeMount(){
        this.form_item = this.item
    },

这样我们自定义的的数据就出来了

    <el-form ref="form" :model="form" label-width="80px">
  <el-form-item v-for="item in form_item" :key="item.label" :label="item.label">
    <el-input  v-model="form.name"></el-input>
  </el-form-item>
</el-form>

字段绑定

先定义两条数据

        form_item: [
            {type: 'input', prop: 'name', label: "姓名"},
            {type: 'select', prop: 'gender', label: "性别"}
        ]

v-if去判断 type 的类型

  <el-form ref="form" :model="form" label-width="80px">
    <templete v-for="item in form_item"  :key="item.prop">
      <el-form-item
        v-if="item.type === 'input'"
        :label="item.label"
      >
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item
        v-if="item.type === 'select'"
        :label="item.label"
      >
        <el-select v-model="form.name"></el-select>
      </el-form-item>
    </templete>
  </el-form>
  

字段就绑定好了 看封装table一样