element封装一个简单的表单组件

这样的功能在后台系统中经常碰见    左边是一个输入框 右边是一个按钮 

我这里使用element 组件书写的  当然左边也可能是 一个下拉框 或者是一个switch 开关 

当然 在开发阶段 不用组件化开发  但是开发完之后呢 要更改功能  一个一个页面改着太麻烦了

那么如果不是一个组件 那么维护起来就有点麻烦了

根据父组件传来的数据进行判断显示那种表单组件

我们首先先来完成表单子组件

// 使用 v-if 判断父组件传来的参数 类型 选择显示那种组件

<el-form :inline="inLine" :model="form" ref="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="(subItem, idx) in item.opts" :key="idx" :label="item.label" :value="subItem.value"></el-option>

        </el-select>

        <el-switch v-model="form[item.model]" v-if="item.type == 'switch'"></el-switch>

      </el-form-item>

      <el-form-item>

        <slot></slot>   //  插槽 用来 接受父组件传来的自定义内容 如上面的 表单 右边的按钮

      </el-form-item>

    </el-form>

export default {

  props: {

    form: Object,   //  用来存放 用户输入的数据

    formLabel: Array, //存放每个表单前的文字描述

    inLine: Boolean     //  判断  表单是横向排列 还是竖向排列   这样的话 默认是 false

  }

}

然后就是父组件 我把子组件起个名字 叫做    common-form

<common-form inLine :formLabel="formLabel" :form="form">

        <el-button type="primary">搜索</el-button>    // 插槽的方式传给子组件

</common-form>

searchForm: {

        form: ''   // 存放用户输入的数据

      },

      formLabel: [

        {

          model: 'keyword',

          label: '',

          options: []  // 如果是select 表单类型  用来存放 options中的 value值

        }

      ]