美文网首页
element-ui form表单二次封装

element-ui form表单二次封装

作者: 代码小王子 | 来源:发表于2019-11-29 11:31 被阅读0次

    组件代码


    <template>

    <el-form :size="size" inline :label-width="labelWidth">

            <el-form-item v-for='item in searchForm' :label="item.label" :key='item.prop'>

                <!-- 输入框 -->

                <el-input clearable v-if="item.type==='Input'" v-model="searchData[item.prop]" :size="size" :placeholder="item.placeholder" :style="{width: item.width}"></el-input>

                <!-- 下拉框 -->

                <el-select clearable v-if="item.type==='Select'" :placeholder="item.placeholder" v-model="searchData[item.prop]" :style="{width: item.width}" :size="size" @change="item.change(searchData[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'" v-model="searchData[item.prop]">

                    <el-radio v-for="ra in item.radios" :label="ra.value" :key="ra.value">{{ra.label}}</el-radio>

                </el-radio-group>

                <!-- 单选按钮 -->

                <el-radio-group v-if="item.type==='RadioButton'" v-model="searchData[item.prop]" @change="item.change && item.change(searchData[item.prop])">

                    <el-radio-button v-for="ra in item.radios" :label="ra.value" :key="ra.value">{{ra.label}}</el-radio-button>

                </el-radio-group>

                <!-- 复选框 -->

                <el-checkbox-group v-if="item.type==='Checkbox'" :style="{width: item.width}" v-model="searchData[item.prop]" >

                    <el-checkbox v-for="ch in item.checkboxs" :label="ch.value" :key="ch.value">{{ch.label}}</el-checkbox>

                </el-checkbox-group>

                <!-- 日期 -->

                <el-date-picker v-if="item.type==='Date'" :placeholder="item.placeholder" v-model="searchData[item.prop]"></el-date-picker>

                <!-- 时间 -->

                <el-time-select v-if="item.type==='Time'" v-model="searchData[item.prop]" type=''></el-time-select>

                <!-- 日期时间 -->

                <el-date-picker v-if="item.type==='DateTime'" type='datetime' v-model="searchData[item.prop]" :disabled="item.disable && item.disable(searchData[item.prop])"></el-date-picker>

                <!-- 滑块 -->

                <!-- <el-slider v-if="item.type==='Slider'" v-model="searchData[item.prop]"></el-slider> -->

                <!-- 开关 -->

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

            </el-form-item>

            <div style="display: inline-block" v-if='isHandle'>

                <el-form-item v-for='item in searchHandle' :key="item.label">

                    <el-button :type="item.type" :size="item.size || size" @click='item.handle()'>{{item.label}}</el-button>

                </el-form-item>

            </div>

        </el-form>

        <!-- <el-form inline v-if='isHandle'>

            <el-form-item v-for='item in searchHandle' :key="item.label">

                <el-button :type="item.type" :size="item.size || size" @click='item.handle()'>{{item.label}}</el-button>

            </el-form-item>

        </el-form> -->

    </template>

    <script>

    export default {

        props:{

            isHandle:{

                type:Boolean,

                default:true

            },

            labelWidth:{

                type:String,

                default:'100px'

            },

            size:{

                type:String,

                default:'medium'

            },

            searchForm:{

                type:Array,

                default:[]

            },

            searchHandle:{

                type:Array,

                default:()=>[]

            },

            searchData:{

                type:Object,

                default:{}

            }

        },

        data () {

            return {

            };

        },

    }

    </script>


    调用组件

    <template>

        <div>

            <search-form

                size='medium'

                labelWidth = '60px'

                :searchData = "searchData"

                :searchForm = "searchForm"

                :searchHandle="searchHandle"

            >

            </search-form>

        </div>

    </template>

    <script>

    import SearchForm from '@/components/common/Form/searchForm'

    let sexs=[{label:'男',value:'M'},{label:'女',value:'F'}]

    let sexProps={label:'label',value:'value'}

    let intersts=[{label:'羽毛球',value:'badminton'},{label:'篮球',value:'basketball'},{label:'足球',value:'football'},{label:'兵乓球',value:'pong'}]

    let interstProps={label:'label',value:'value'}

    export default {

        components: {

            SearchForm,

        },

        data() {

            return {

                searchData:{

                    name:null,

                    age:null,

                    sex:null,

                    date: '',

                    interst: []

                },

                searchForm:[

                    {type:'Input',label:'姓名:',prop:'name',width:'180px',placeholder:'请输入姓名'},

                    {type:'Input',label:'年龄',prop:'age',width:'180px',placeholder:'请输入年龄'},

                    {type:'Date',label:'日期',prop:'date',width:'180px',placeholder:'请选择日期'},

                    {type:'Select',label:'性别',prop:'sex',width:'120px',options:sexs,props:sexProps,change:row=>'',placeholder:'请选择性别'},

                    {type:'Checkbox',label:'爱好',prop:'interst',checkboxs:intersts,props:interstProps}

                ],

                searchHandle:[

                    {label:'查询',type:'primary',handle:()=>this.searchHandleForm()},

                    {label:'重置',type:'primary',handle:()=>''}

                ],

                // 表单验证

                editRules: {

                    name: [{requied: true, message: '请输入姓名', trigger: 'blur'}]

                }

            }

        },

        methods: {

            searchHandleForm() {

                console.log('searchHandle')

            },

        }

    }

    </script>

    相关文章

      网友评论

          本文标题:element-ui form表单二次封装

          本文链接:https://www.haomeiwen.com/subject/kswwwctx.html