組件代碼
<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>
? ? ? ? ? ? <!-- 復(fù)選框 -->
? ? ? ? ? ? <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> -->
? ? ? ? ? ? <!-- 開關(guān) -->
? ? ? ? ? ? <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>
調(diào)用組件
<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>
