<template>
    <el-form ref="formT" label-width="100px" :model="formT" :inline="inline">
        <el-form-item v-for="item in formLabel" :key="item.label" :label="item.label">
            <el-input
                v-if="item.type === 'input'"
                :placeholder="'请输入'+item.label"
                v-model="formT[item.model]"
            ></el-input>
            <el-switch v-if="item.type === 'switch'" v-model="formT[item.model]"> </el-switch>
            <el-date-picker
                 v-if="item.type === 'date'"
                 type="date"
                 value-format="yyyy-MM-dd"
                 placeholder="选择日期"
                 v-model="formT[item.model]"
            
            >
            </el-date-picker>
            <el-select
                v-if="item.type === 'select'"
                placeholder="请选择"
                v-model="formT[item.model]"

            >
                <el-option
                v-for="item in item.opts"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                ></el-option>
            </el-select>
            
        </el-form-item>
        <el-form-item><slot></slot></el-form-item>
    </el-form>
</template>
<script>
export default{
    props:{
        // {
        //     "model": "keyword",
        //     "label": "",
        //     "type": "input"
        // }
        formLabel:Array,
        // {
        //   "keyword": ""
        //}   
        form:Object,
        
        inline:Boolean
    },
    data(){
       return{
           formT:this.form
       } 
        
    },
    mounted() {
        // console.log("this.formLabel")
        // console.log(this.formLabel)
      
        // console.log("this.form")
        // console.log(this.form)
        // console.log("this.inline")
        // console.log(this.inline)
    },
}
</script>


formlabel示例数据如下：
this.formlabel=[
    {
        "model": "name",
        "label": "姓名",
        "type": "input"
    },
    {
        "model": "sex",
        "label": "性别",
        "type": "select",
        "opts": [
            {
                "label": "男",
                "value": 1
            },
            {
                "label": "女",
                "value": 0
            }
        ]
    },
    {
        "model": "birth",
        "label": "出生日期",
        "type": "date"
    },
    {
        "model": "addr",
        "label": "地址",
        "type": "input"
    }
]

this.form 表单元素示例
this.form={
    "name": "",
    "addr": "",
    "age": "",
    "birth": "",
    "sex": ""
}

incline ：true or false 是否放在一列上

父组件调用示例（common-form）是我们封装的方法
<el-dialog
    :title="operateType === 'add' ? '新增用户' : '更新用户'"
    :visible.sync="isShow"
>
    <common-form
    :formLabel="formLabel"
    :form="form"
    :inline="true"
    ref="form"
    ></common-form>
    
    <div slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
    </div>
</el-dialog>











