使用element-ui二次封裝一個可複用查詢搜索組件

源碼連接：查詢表單組件

組件：searchForm.vue

<!-- 搜索表單 -->
<template>
<div class="ces-search">
    <el-form :size="size" inline :label-width="labelWidth">
        <el-form-item v-for='item in searchForm' :label="item.label" :key='item.prop'>
            <!-- 輸入框 -->
            <el-input v-if="item.type==='Input'" v-model="searchData[item.prop]" size="mini" ></el-input>
            <!-- 下拉框 -->
            <el-select v-if="item.type==='Select'" v-model="searchData[item.prop]" size="mini" @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'" 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'" 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>
    </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>
</div>
</template>

<script> export default { props:{ isHandle:{ type:Boolean, default:true }, labelWidth:{ type:String, default:'100px' }, size:{ type:String, default:'mini' }, searchForm:{ type:Array, default:[] }, searchHandle:{ type:Array, default:()=>[] }, searchData:{ type:Object, default:{} } }, data () { return { }; }, } </script>
<style>

</style>

 

組件調用：index.vue，組合table

<template>
  <div class="ces-main">
    <search-form size='mini' labelWidth = '80px' :searchData = "searchData" :searchForm = "searchForm" :searchHandle="searchHandle"></search-form>
    <ces-table size='mini' :isSelection='true' :isIndex='true' :isPagination='true' :isHandle='true' :tableData='tableData' :tableCols='tableCols' :tableHandles='tableHandles' :pagination='pagination'
      >
      </ces-table>
  </div>
</template>

<script> import SearchForm from '@/components/common/Form/searchForm' import cesTable from '@/components/common/Table/Table' export default { data () { let sexs=[{label:'男',value:'M'},{label:'女',value:'F'}] let sexProps={label:'label',value:'value'} let intersts=[{label:'羽毛球',value:'badminton'},{label:'籃球',value:'basketball'}] let interstProps={label:'label',value:'value'} return { // 查詢表單
 searchData:{ name:null, age:null, sex:null, interst:null }, searchForm:[ {type:'Input',label:'姓名',prop:'name',width:'180px',placeholder:'請輸入姓名...'}, {type:'Input',label:'年齡',prop:'age',width:'180px',placeholder:'請輸入年齡...'}, {type:'Select',label:'性別',prop:'sex',width:'180px',options:sexs,props:sexProps,change:row=>'',placeholder:'請選擇性別...'}, {type:'Checkbox',label:'愛好',width:'180px',prop:'interst',checkboxs:intersts,props:interstProps} ], searchHandle:[ {label:'查詢',type:'primary',handle:()=>''}, {label:'重置',type:'primary',handle:()=>''} ], // 表格
 tableData:[ {name:'張三',age:'12',sex:'男',interst:'女'}, {name:'筱華',age:'27',sex:'女',interst:'羽毛球'}, {name:'張三',age:'12',sex:'男',interst:'女'}, {name:'筱華',age:'27',sex:'女',interst:'羽毛球'}, {name:'筱華',age:'27',sex:'女',interst:'羽毛球'}, {name:'筱華',age:'27',sex:'女',interst:'羽毛球'}, {name:'筱華',age:'27',sex:'女',interst:'羽毛球'} ], tableCols:[ {label:'姓名',prop:'name'}, {label:'年齡',prop:'age'}, {label:'性別',prop:'sex'}, {label:'愛好',prop:'interst'}, {label:'操做',type:'Button',btnList:[ {type:'primary',label:'編輯',handle:row=>''}, {type:'danger',label:'刪除',handle:row=>''} ]} ], tableHandles:[ {label:'新增',type:'primary',handle:row=>''} ], pagination:{ pageSize:10, pageNum:1, total:7 } } }, components:{ cesTable, SearchForm } } </script>

<style>

</style>

 

運行效果：