## SearchBar 查询条
使用统一的配置来生成查询项目，避免每个列表的重写
目前查询控件支持的类型：
| 名称 | 说明 | 类型 | 默认值\(举例\) |
| :--- | :--- | :--- | :--- |
| text | 文本 | string | |
| select | 下拉框 | int/string | |
| muti | 多选下拉框 | int/string | |
| searchinput | 远程搜索框 | int/string | |
| date | 日期 | int | 1496246400000 |
| datetime | 日期时间 | int | 1496246400000 |
| daterange | 日期范围 | array | \[1496246400000,1496332800000\] |
| datetimerange | 日期时间范围 | array | \[1496246400000,1496332800000\] |
##### 基本用法:
1. 在data中定义searchconfig 或也可以通过ajax从后台获取配置，生成搜索条
2. 操作搜索中的下拉框，文本框，日期选择等，触发getsearchdata事件返回搜索字段的键值对象
~~~
<abc-searchbar :searchconfig="searchbarconfig" @getsearchdata="getSearchData"></abc-searchbar>
export default{
data() {
return {
searchbarconfig: [
{
type: "select",
name: "status",
title: "状态",
options: [
{id: '', value: '状态'},
{id: -1, value: '失效'},
{id: 1, value: '处理中'},
{id: 2, value: '完结'}
],
value: "1"
},
{
type: "text",
name: "name",
title: "姓名",
value: ""
},
{
type: "daterange",
name: "createtime",
title: "姓名",
value: ""
},
{
type: "searchinput",
name: "studentID",
title: "学生ID",
value:1, //默认值
requestUrl:"http://rap2api.taobao.org/app/mock/8893/POST/searchBarInput" //远程搜索框搜索时post请求地址
}
],
}
},
methods: {
//搜索回调事件
getSearchData: function(postdata){
//使用postdata作为参数传到后台获取数据
}
}
}
~~~
3. 远程搜索框搜索接口
前端传入参数格式：
~~~
{value:'搜索输入内容'}
~~~
服务端返回数据格式：
~~~
{
data:{
options:[
{id: 4, value: "fa"},
{id: 3, value: "ffffff"},
{id: 6, value: "eeeee"},
]
},
info:"success",
status:true
}
~~~
##### Screenshot
##### 
#### 属性:
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :--- | :--- | :--- | :--- | :--- |
| hasDefault | 是否有默认值，如设置为true，组件在created生命周期后默认发起搜素事件 | boolean | true/false | false |
| searchconfig | 选项值数组 | array | | - |
#### 事件：
| 事件名 | 说明 | 回调参数 |
| :--- | :--- | :--- |
| getsearchdata | 获取需要post的搜索数据 | postdata：搜索数据对象 |
#### 方法：
| 方法名 | 说明 | 参数 |
| :--- | :--- | :--- |
| defaultSearch | 主动调用执行搜索\(有默认值的情况\) | - |
调用说明
```js
<abc-searchbar ref="search" :searchconfig="searchbarconfig" @getsearchdata="getSearchData"></abc-searchbar>
this.$refs.search.defaultSearch();
```
