使用element-ui二次封装一个可复用查询搜索组件

源码链接：查询表单组件

组件：searchForm.vue

<!-- 搜索表单 -->
<template>
<div class="ces-search">
    <el-form :size="size" inline :label-width="labelWidth">
        <el-form-item v-for='item in formCell' :label="item.label">
            <!-- 输入框 -->
            <el-input v-if="item.type==='Input'" :style='{width:item.width}' v-model="formData[item.prop]" size="mini" :placeholder="item.placeholder"></el-input>
            <!-- 下拉框 -->
            <el-select v-if="item.type==='Select'" :style='{width:item.width}' v-model="formData[item.prop]" size="mini" @change="item.change(formData[item.prop])">
                <el-option v-for="op in item.options" :label="op.label" :value="op.value" :key="op.value"></el-option>
            </el-select>
            <!-- 单选 -->
            <el-radio-group v-if="item.type==='Radio'" :style='{width:item.width}' v-model="formData[item.prop]">
                <el-radio v-for="ra in item.radios" :label="ra[item.props.value]">{{ra[item.props.label]}}</el-radio>
            </el-radio-group>
            <!-- 复选框 -->
            <el-checkbox-group v-if="item.type==='Checkbox'" :style='{width:item.width}' v-model="formData[item.prop]" >
                <el-checkbox v-for="ch in item.checkboxs" :label="ch.value">{{ch.label}}</el-checkbox>
            </el-checkbox-group>
            <!-- 滑块 -->
            <!-- <el-slider v-if="item.type==='Slider'" v-model="formData[item.prop]"></el-slider> -->
            <!-- 开关 -->
            <el-switch v-if="item.type==='Switch'" v-model="formData[item.prop]" ></el-switch>
        </el-form-item>
    </el-form>
</div>
</template>

<script>
export default {
    props:{
        labelWidth:{
            type:String,
            default:'100px'
        },
        size:{
            type:String,
            default:'mini'
        },
        formCell:{
            type:Array,
            default:[]
        },
        formData:{
            type:Object,
            default:{}
        }
    },
    data () {
        return {
        };
    },

}

</script>
<style>

</style>

css:

.ces-search >.el-form> .el-form-item {
    margin-bottom:0px;
}

组件调用：index.vue

<template>
  <div class="ces-main">
    <search-form 
      labelWidth = '80px' 
      :formData = "searchData"
      :formCell = 'searchCell'></search-form>
  </div>
</template>

<script>
import SearchForm from '@/components/common/Form/SearchForm'
export default {
  data () {
    return {
      searchData:{
        name:null,
        age:null,
        sex:null,
        interst:null
      },
      searchCell:[
        {type:'Input',label:'姓名',prop:'name',width:'200px',placeholder:'请输入姓名...'},
        {type:'Input',label:'年龄',prop:'age',width:'200px',placeholder:'请输入年龄...'},
        {type:'Select',label:'性别',prop:'sex',width:'200px',options:[{label:'男',value:'M'},{label:'女',value:'F'}],change:row=>'',placeholder:'请选择性别...'},
        {type:'Checkbox',label:'爱好',width:'200px',prop:'interst',checkboxs:[{label:'羽毛球',value:'badminton'},{label:'篮球',value:'basketball'}]}
      ]
    }
  },
  components:{
    SearchForm
  }
}
</script>

<style>

</style>

css:

.ces-main{
    padding:20px;
}

运行效果：