search-list
查詢組件澎嚣，內(nèi)置el-input承二、el-date-picker、el-select、el-autocomplete俱笛、以及組織機(jī)構(gòu)組件
使用方法 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
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| search-list | 查詢條件數(shù)組 | array | -- | -- |
| label-width | 表單域標(biāo)簽的寬度捆姜，作為 Form 直接子元素的 form-item 會(huì)繼承該值 | string | -- | -- |
| fullscreen-loading | 是否全屏顯示加載 | boolean | -- | false |
| active-name | 和選項(xiàng)卡配合使用， 有選項(xiàng)卡時(shí)為當(dāng)前選項(xiàng)卡的name值 | string | -- | -- |
| search-btn | 是否顯示查詢按鈕 | boolean | -- | true |
| search-text | 查詢按鈕文字 | string | -- | 查詢 |
| export-bexportoutTexttn | 是否顯示導(dǎo)出按鈕 | boolean | -- | true |
| exportout-text | 導(dǎo)出按鈕文字 | string | -- | 導(dǎo)出 |
| reset-btn | 是否顯示重置按鈕 | boolean | -- | false |
| reset-text | 重置按鈕文字 | string | -- | 重置 |
| search-info | 查詢說明 | string | -- | -- |
SearchList 數(shù)組配置
- 通用配置
| 屬性 | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| label | 標(biāo)簽文本 | string | -- | -- |
| tooltip | 查詢提示文字 | string | -- | -- |
| element | 組件元素 | string | el-date-picker迎膜、el-input泥技、el-select、el-autocomplete磕仅、ytochoice珊豹、yto-select-area | -- |
| required | 是否為必填項(xiàng) | boolean | -- | false |
| target | 與選項(xiàng)卡一起使用， 表示那個(gè)選項(xiàng)卡使用該組件榕订， 默認(rèn)全部使用 | array | 選項(xiàng)卡的name值 | -- |
| key | 查詢字段 | string | -- | -- |
| startKey | 范圍選擇時(shí)開始日期的查詢字段值 | string | -- | -- |
| endKey | 范圍選擇時(shí)結(jié)束日期的查詢字段值 | string | -- | -- |
| value | 查詢字段的值 | string | -- | -- |
| isArray | 是否是數(shù)組店茶， 組織機(jī)構(gòu)、文本框默認(rèn)返回以逗號分隔的字符串劫恒、如果需要返回?cái)?shù)組需要置為true | boolean | -- | false |
| type | 指定日期選擇器類型,或者輸入框類型 | string | year/month/date/dates/ week/datetime/datetimerange/daterange | date |
| placeholder | 輸入提示 | string | -- | -- |
| startPlaceholder | 范圍選擇時(shí)開始日期的占位內(nèi)容 | string | -- | -- |
| endPlaceholder | 范圍選擇時(shí)結(jié)束日期的占位內(nèi)容 | string | -- | -- |
| pickerOptions | 日期選擇范圍 | object | -- | { } |
| rangeSeparator | 選擇范圍時(shí)的分隔符 | string | -- | 至 |
| valueFormat | 可選贩幻，綁定值的格式。不指定則綁定值為 Date 對象 | string | -- | -- |
| rows | 輸入框行數(shù)两嘴，只對 type="textarea" 有效 | number | -- | 2 |
| autosize | 自適應(yīng)內(nèi)容高度丛楚，只對 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” 時(shí)有效贰您， 返回輸入建議的方法喧务，僅當(dāng)你的輸入建議數(shù)據(jù) resolve 時(shí)，通過調(diào)用 callback(data:[]) 來返回它 | function(queryString, cb) | -- | -- |
| valueKey | 在element=“el-autocomplete” 時(shí)有效枉圃，輸入建議對象中用于顯示的鍵名 | string | -- | value |
| triggerOnFocus | 在element=“el-autocomplete” 時(shí)有效功茴，是否在輸入框 focus 時(shí)顯示建議列表 | boolean | -- | true |
| regionSelect | 組織機(jī)構(gòu)下有效， 指定組織機(jī)構(gòu)最多組織類型 | array | 大區(qū)孽亲、城市坎穿、集散中心、集散倉返劲、營業(yè)部玲昧、營業(yè)站 | [ ] |
| typeKey | 組織機(jī)構(gòu)下有效， 指定返回的組織機(jī)構(gòu)類型代碼 | string | -- | typeCode |
SearchList Events
| 事件名稱 | 說明 | 參數(shù) |
|---|---|---|
| query | 點(diǎn)擊查詢按鈕事件篮绿， 默認(rèn)拿到查詢參數(shù)查詢孵延，并向上觸發(fā)該事件 | -- |
| change | 查詢條件改變時(shí)觸發(fā)該事件 | searchObj |
| exportout | 點(diǎn)擊導(dǎo)出時(shí)觸發(fā)該事件，不會(huì)自動(dòng)導(dǎo)出亲配，需要父組件自己發(fā)送請求 | searchObj |
| reset | 點(diǎn)擊重置按鈕是觸發(fā)該事件 | -- |
