看看封装 , 比较简单 , 只有picker , input 跟 select
<template>
<div class="tab">
<el-form :inline="true">
<el-form-item v-for="(item, index) in SearchBoxData" :key="index" :label="item.label">
<!--date-time选项 :type="item.option.type"-->
<el-date-picker v-if="item.e == 'date'" v-model="search[item.name]" :placeholder="item.placeholder" />
<!--input选项 -->
<el-input v-if="item.e == 'input'" v-model="search[item.name]" clearable :placeholder="item.placeholder" />
<!--select选项 -->
<el-select v-if="item.e==='select'" v-model="search[item.name]" :placeholder="item.placeholder">
<el-option v-for="op in list" :key="op.id" :label="op.name" :value="op.id" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="query">查询</el-button>
</el-form-item>
</el-form>
<el-form>
<el-form-item>
<template>
<slot name="button" />
</template>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
props: {
search: {
type: Object,
default() {
// 设置默认搜索项
var search_data = this.search
for (var index in this.searchdata) {
var tmp = this.searchdata[index]
var key = tmp.name
var val = ''
search_data[key] = val
}
return search_data
}
},
// eslint-disable-next-line vue/prop-name-casing
SearchBoxData: { type: Array, default: () => [] },
list: { type: Array, default: () => [] }
},
methods: {
query() {
// 调用父级事件,返回搜索项
this.$emit('searchEvent', this.search)
}
}
}
</script>
<style scoped>
.tab{
width: 100%;
display: flex;
justify-content: space-between;
background: #fff !important;
}
</style>
父组件使用
<template>
<div id="app">
<Form ref="from" :search-box-data="SearchBoxData" :search="search" @searchEvent="searchEvent" :list="list">
// 这里使用的是插槽的方式
<template slot="button">
<el-button type="primary" @click="dialog = true">新增</el-button>
</template>
</Form>
</div>
</template>
<script>
import Form from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
Form
},
data() {
return {
SearchBoxData: [
{ label: '学校', name: 'name', e: 'input', placeholder: '请选择学校名称' },
{ label: '学校地址', name: 'id', e: 'select', placeholder: '请选择学校地址' }
],
search: {},
// 一般都是后端给的
list:[{name:1,id:1},{name:2,id:2}]
}
},
methods: {
// 搜索
searchEvent(id) {
// 穿过来的值 然后调接口
console.log(id);
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>