search-list
查询组件，内置el-input、el-date-picker、el-select、el-autocomplete、以及组织机构组件
使用方法 Usage
<template>
<search-list :search-list="searchList"
:search-info="searchInfo"
:fullscreen-loading="fullscreenLoading"
:search-btn="searchBtn"
:search-text="searchText"
:exportout-btn="exportoutBtn"
:exportout-text="exportoutText"
:reset-btn="resetBtn"
:reset-text="resetText"
:label-width="labelWidth"
:active-name="activeName || tabs[0].name"
:created-unload="createdUnload"
@change="searchChanged"
@query="query"
@exportout="exportout"
@reset="reset" />
</template>
<script>
import { SearchList } from '@/components'
export default {
name: "App",
components: {
SearchList
}
</script>
searchList Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| search-list | 查询条件数组 | array | -- | -- |
| label-width | 表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值 | string | -- | -- |
| fullscreen-loading | 是否全屏显示加载 | boolean | -- | false |
| active-name | 和选项卡配合使用， 有选项卡时为当前选项卡的name值 | string | -- | -- |
| search-btn | 是否显示查询按钮 | boolean | -- | true |
| search-text | 查询按钮文字 | string | -- | 查询 |
| export-bexportoutTexttn | 是否显示导出按钮 | boolean | -- | true |
| exportout-text | 导出按钮文字 | string | -- | 导出 |
| reset-btn | 是否显示重置按钮 | boolean | -- | false |
| reset-text | 重置按钮文字 | string | -- | 重置 |
| search-info | 查询说明 | string | -- | -- |
SearchList 数组配置
- 通用配置
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| label | 标签文本 | string | -- | -- |
| tooltip | 查询提示文字 | string | -- | -- |
| element | 组件元素 | string | el-date-picker、el-input、el-select、el-autocomplete、ytochoice、yto-select-area | -- |
| required | 是否为必填项 | boolean | -- | false |
| target | 与选项卡一起使用， 表示那个选项卡使用该组件， 默认全部使用 | array | 选项卡的name值 | -- |
| key | 查询字段 | string | -- | -- |
| startKey | 范围选择时开始日期的查询字段值 | string | -- | -- |
| endKey | 范围选择时结束日期的查询字段值 | string | -- | -- |
| value | 查询字段的值 | string | -- | -- |
| isArray | 是否是数组， 组织机构、文本框默认返回以逗号分隔的字符串、如果需要返回数组需要置为true | boolean | -- | false |
| type | 指定日期选择器类型,或者输入框类型 | string | year/month/date/dates/ week/datetime/datetimerange/daterange | date |
| placeholder | 输入提示 | string | -- | -- |
| startPlaceholder | 范围选择时开始日期的占位内容 | string | -- | -- |
| endPlaceholder | 范围选择时结束日期的占位内容 | string | -- | -- |
| pickerOptions | 日期选择范围 | object | -- | { } |
| rangeSeparator | 选择范围时的分隔符 | string | -- | 至 |
| valueFormat | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | -- | -- |
| rows | 输入框行数，只对 type="textarea" 有效 | number | -- | 2 |
| autosize | 自适应内容高度，只对 type="textarea" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 } | boolean / object | -- | false |
| resize | 控制是否能被用户缩放 | string | none, both, horizontal, vertical | -- |
| options | 只对element = ‘el-select’ 有效， 指定下拉选择的下拉列表,例： [{ label: “男”, value： “1” }] | array | -- | [ ] |
| fetchSuggestions | 在element=“el-autocomplete” 时有效， 返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它 | function(queryString, cb) | -- | -- |
| valueKey | 在element=“el-autocomplete” 时有效，输入建议对象中用于显示的键名 | string | -- | value |
| triggerOnFocus | 在element=“el-autocomplete” 时有效，是否在输入框 focus 时显示建议列表 | boolean | -- | true |
| regionSelect | 组织机构下有效， 指定组织机构最多组织类型 | array | 大区、城市、集散中心、集散仓、营业部、营业站 | [ ] |
| typeKey | 组织机构下有效， 指定返回的组织机构类型代码 | string | -- | typeCode |
SearchList Events
| 事件名称 | 说明 | 参数 |
|---|---|---|
| query | 点击查询按钮事件， 默认拿到查询参数查询，并向上触发该事件 | -- |
| change | 查询条件改变时触发该事件 | searchObj |
| exportout | 点击导出时触发该事件，不会自动导出，需要父组件自己发送请求 | searchObj |
| reset | 点击重置按钮是触发该事件 | -- |
