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 |
点击重置按钮是触发该事件 |
-- |
网友评论