// 绑定方法
bindEvents () {
return this.itemOptions.events || {}
},最后dom里使用这些数据绑定：
<el-input
v-if="isInput"
v-model="currentVal"
v-bind="bindProps"
v-on="bindEvents"
></el-input>（3）特殊情况的处理
由于elementui的el-select里是通过el-option遍历实现的，而遍历数组options按elementui官方不是绑定在el-select上的，所以针对el-select的配置项再加一个options里属性，即select选择项的数据数组。
<el-select
v-if="isSelect"
v-model="currentVal"
v-bind="bindProps"
v-on="bindEvents"
size="mini"
clearable
>
<el-option
v-for="item in itemOptions.options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>elementui的日期时间选择器分了很多种，根据业务需要分别处理一下，我这里是根据type划分成了三种分开处理，最常用的是datetimerange日期时间范围选择器，作为默认项，还有一种monthrange，其余的都划为一种。（具体处理见文章末尾的完整代码）
6、按钮组
按钮其实就那么几个，没必要做太多的封装，根据业务有哪些按钮就封装进去，目前我这里就封装了三个按钮。
通过props接受一个字符串标识按钮组：
// 提交按钮项，多个用逗号分隔（query搜索, export导出, reset重置）
btnItems: {
type: String,
default () {
return 'search'
}
}7、使用方式示例
dom:
<!-- 搜索 -->
<searchForm :formOptions="formOptions" @onSearch="onSearch"/>vue data里:
formOptions: [
{
label: '意见内容',
prop: 'content',
element: 'el-input'
},
{
label: '类型',
prop: 'type',
element: 'el-select',
options: [
{ label: '给点意见', value: '1' },
{ label: '售后问题', value: '2' }
] },
{
label: '状态',
prop: 'status',
element: 'el-select',
options: getFeedbackStatus()
},
{
label: '提交时间',
prop: 'timeRange',
element: 'el-date-picker'
}
],vue methods里:
// 获取搜索表单提交的数据
onSearch (val) {
console.log(val)
}8、完整代码
（1）searchForm.vue
/**
* Created by hanxueqiang on 200107
*
* 搜索栏公共组件
