基于element-ui组件二次封装篇（3）-form表单1（基础功能开发）

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

写在前面的话

本次项目使用到的是vue3.0+ts。之前封装了较为简单的select选择框组件和input输入框，本次封装form表单。由于开发过程经常需要用到form表单，且大同小异，每次都复制，时间和犯错成本都很高，那么把他封装起来是再合适不过了。

封装过程

新建子组件

在components中新建一个组件，名为：formComponents

然后在对应的父组件中引入该组件即可。

基本功能开发

1.观察element-ui 中form组件的基本代码

2.定义要传入form组件的数据结构

如上，由于form组件中有多种不同类型的控件，因此需要一个type来定义

由于form组件需要有label值和prop，故需要一个label和name来定义

如果是select选择框，则需要传入option列表

还需要定义form表单中各变量的数据

3.接下来就可以开始开发子组件

• 在子组件引入element-ui基本的form组件
• 接收父组件传递的formFiled数据和配置项formData数据
• 判断input类型，select类型等
• 处理提交按钮，将form子组件数据提交给业务组件

 <el-form ref="ruleFormRef" :model="dialogForm" labelWidth="100px">
    <el-form-item
      v-for="(item, index) in form"
      :key="index"
      :label="item.label"
      :prop="item.name"
    >
    <template  v-if="item.type == 'input'">
      <el-input
        v-model="dialogForm[item.name]"
      /></template>
    <template  v-if="item.type == 'select'">
      <el-select v-model="dialogForm[item.name]">
        <el-option v-for="(item,index) in item.option" :key="index" :label="item.label" :value="item.value" />
      </el-select>
      </template>
    </el-form-item>
   
    <el-form-item>
      <el-button type="primary" @click="submitForm()">Create</el-button>
      <el-button>Cancel</el-button>
    </el-form-item>
  </el-form>
<script lang="ts" setup>
import {toRefs, defineProps,computed,defineEmits  } from "vue";
const props = defineProps({
  form: Array,
  filed:Object,
});
const {form} = toRefs(props);
const dialogForm = computed(() => props.filed);
const emit = defineEmits(['submitVal'])
const submitForm = async () => {
    emit('submitVal', dialogForm.value);
}
</script>
复制代码

4.业务组件开发

将数据传给form组件，并接受form组件提交的数据

<myForm :form="formData" :filed="formFiled"  @submitVal="getData"></myForm>
 ……
 
 methods:{
    getData(data:Object){
      console.log(data);
    }
 }
复制代码

总结

至此，form表单封装最基本的功能就开发完成，但是我们实际项目中还需要比较多，如表单验证的功能，自定义placeholder，自定义labelWidth等个性化功能，那么我们在下篇文章中再做详细讲解。