7-2 更完善的表单组件封装及思路讲解

目录：

• 分析表单组成：输入框、下拉框、日期选择器、单选列表、多选列表...
• 考虑基本参数：绑定的表单字段、表单描述文本
• 插槽拓展组件：按钮组

一、效果图

二、分析表单组成

因为我们在 common单独封装了组件  Form.vue,我们当然 根据 父组件的传值，来确定我们到底是需要form表单的标签，所以我们封装如下：参考的是 elemnt-ui 的 form表单

<template>
    <el-form :inline="true" ref="form" :model="form" label-width="100px">
        <el-form-item v-for="item in formLabel" :key="item.model">
          <el-input v-model="form[item.model]" :placeholder="'请输入' + item.label" v-if="!item.type"></el-input>
          <el-select v-model="form[item.model]" placeholder="请选择" v-if="item.type === 'select'">
              <el-option v-for="item in item.opts" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-switch v-model="form[item.model]" v-if="item.type === 'switch'"></el-switch>
          <el-date-picker v-model="form[item.model]" type="date" placeholder="选择日期" v-if="item.type === 'date'" value-format="yyyy-MM-dd"> </el-date-picker>
        </el-form-item>
        <el-form-item><slot></slot></el-form-item>  <!--卡槽，看看输入什么按钮-->
    </el-form>
</template>

<script>
    export default {
        props: { //接收父组件传递过来的值
          inline: Boolean,
          form: Object,
          formLabel: Array
        }
    }
</script>

<style scoped>

</style>

二、 考虑基本参数

我们在UserMange.vue中就需要考虑基本参数，向子组件传值

<template>
    <div class="manage">
      <div class="manage-header">
        <el-button type="primary">+ 新增</el-button>
        <Form inline :formLabel="formLabel" :form="searchForm">
          <el-button type="primary">搜索</el-button>   <!--卡槽输入的按钮-->
        </Form>
      </div>
      <div class="manage-content">
        <Table></Table>
      </div>
    </div>
</template>

<script>
    ....

    export default {
      components: {
          Form,
          Table
      },
      data(){
        return {
          searchForm: {
            keyword: ''
          },
          formLabel: [
            {
              model: 'keyword',
              label: ''
            }
          ]
        }
      }
    }
</script>

<style scoped>

</style>

注意：这边需要用到的是 inline属性，因为需要是行内标签。

四、css样式

common.css样式

/*编写公用的样式*/
.manage {
  height: 95%;
  padding-bottom: 40px;
  overflow: hidden;
}

.manage .manage-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}