@rrc-materials/search

---

showNav: true

Search

@rrc-materials/search for rrc

<script> import Search from './demo/search.md' import EnableConditionList from './demo/enable.condition.list.md' import HoverSearch from './demo/hover.search.md' import Placement from './demo/placement.md' import Placeholder from './demo/placeholder.md' import PageNames from './demo/pageNames.md' import ButtonTexts from './demo/buttonTexts.md' import EnableSql from './demo/enableSql.md' export default { components: { Search, EnableConditionList, HoverSearch, Placement, Placeholder, PageNames, ButtonTexts, EnableSql } } </script>

Search 检索

默认Search 检索

关闭常用检索页

设置enable-condition-list为false即可关闭常用检索页；设置enable-save-condition为false即可取消“保存为常用检索”按钮。

关闭高级公式检索

设置enableSql为false，即可关闭

hover触发检索

设置trigger为hover即可改变检索面板的触发方式，还可以设置showTimeout和hideTimeout来改变显示和消失时的延迟时间

设置检索面板位置

设置placement属性的值，即可改变检索面板出现的位置，方法同vue-popover

设置占位文本

设置placeholder的值，即可在没有检索值时显示该占位文本

自定义检索页名称

自定义检索页按钮文案

Attributes

参数	说明	可选值	类型	默认值
data	search 的数据源，配置可以检索的列，每个列的属性见SearchItem表	-	Array	[]
conditionGroup	search条件组，如果有值, 会和默认条件组进行merge操作; 默认条件组见conditionGroup表	-	Object	{}
condition	search 的条件定义，如果有值, 会和默认条件定义进行merge操作; 默认条件定义见condition表	-	Object	{}
defaultCondtion	search 的默认条件表，如果有值, 会和默认条件表进行merge操作; 默认条件组见defaultCondtion表	-	Array	[]
enableSql	启用高级公式	-	Boolean	true
enableConditionList	启用常用检索	-	Boolean	true
conditionList	常用检索列表,启用常用检索后，才能显示常用检索列表，详情见conditionList表	-	Array	[]
enableSaveCondition	search 启用检索保存	-	Boolean	false
placement	search 检索面板出现位置，同Element-UI	top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end	String	bottom-start
trigger	search 的弹出检索面板的触发方式	hover、click	String	click
showTimeout	search 的hover触发时，面板显示的延迟时间，ms	-	Number	250
hideTimeout	search 的hover触发时，面板消失的延迟时间，ms	-	Number	150
placeholder	search 没有检索时的占位文本	-	String	数据筛选
pageNames	search 的自定义检索页名称	-	Array	['常用检索', '自定义检索']
buttonTexts	search 的自定义按钮文案	-	Array	['保存为常用检索', '检索']

:::tip 一个检索列，检索条件表优先级如下：condition（列自己传入的条件表） > conditionGroup[conditionGroup] （根据列自己传入的conditionGroup检索条件组名字取得的条件表）> defaultCondtion :::

conditionGroup

默认条件组，可以通过Vue.prototype.$RC_SEARCH全局注入。

{
  text: ['=', 'like', 'notLike', 'isNull', 'isNotNull'],
  number: ['>', '=', '<', '>=', '<=', 'between', 'isNull', 'isNotNull'],
  select: ['=', 'in'],
  date: ['>', '=', '<', '>=', '<=', 'between', 'isNull', 'isNotNull'],
  cascader: ['=']
}

condition

默认条件定义，即默认条件的含义对照，key是条件id，value是条件的含义，也是用来显示的条件名称。可以通过Vue.prototype.$RC_SEARCH全局注入。

{
  '>': '大于',
  '=': '等于',
  '<': '小于',
  '>=': '大于等于',
  '<=': '小于等于',
  'like': '包含',
  'notLike': '不包含',
  // 表示一个数在两个数值之间取值
  'between': '区间',
  'in': '范围',
  'isNull': '为空',
  'isNotNull': '不为空',
}

defaultCondtion

默认条件表。即当检索列既没定义condition，也没定义检索type，那就使用此默认的检索条件表。 可以通过Vue.prototype.$RC_SEARCH全局注入。

[
  '='
]

conditionList

常用检索列表项定义

参数	说明	可选值	类型	默认值
label	检索项 name，用来显示	-	String	-
selected	检索项选中状态，如果是true，该项选中	-	Boolean	-
render	检索项自定义渲染方法，如果存在render方法，则优先自定义否则显示label	-	function(h, item)，item是该检索项定义	-

SearchItem

检索数据项定义

参数	说明	可选值	类型	默认值
prop	检索项的key值，可以用来传给后端	必须	String	-
label	检索项的显示名字	-	String	-
type	检索项的检索类型，默认是input类型检索	select/datePicker/cascader/switch/slider/number/input	String	-
value	检索项的初始条件值，具体类型和检索项的类型有关，比如type是select，那value就是select的初始值	-	any	-
condition	检索项的检索条件表，如果未定义，会根据检索conditionGroup到检索条件组去找检索条件表，如果还没有就会默认使用defaultCondtion	-	String	-
conditionGroup	检索条件组名称，可以用来获得该检索的检索条件表	text/number/select/date/cascader	String	-
renderComponent	检索项的自定义渲染方法，如果自定义渲染，将不再根据type来渲染相应组件	-	Function(h, renderComponent, data),renderComponent是是该检索项项组件自身，data是该检索项定义	-
asyncData	检索项是select、cascader等时，返回select、cascader的data数据，可以是异步	-	Function(data) data是该检索项定义	-
::: tip
其它检索项的属性，可以是根据type不同传递相应组件的属性，请按jsx识别的模式传，如：

{
  attr,
  on,
  nativeOn,
  class,
  style
}

:::

Events

事件名称	说明	回调参数
search	常用检索，单个条件点击	条件值value
saveCondition	保存为常用检索	当前检索条件值value
visible-change	下拉框出现/隐藏时触发 出现则为 true，隐藏则为 false	true/false

Methods

方法名	说明	参数
show	显示检索面板	-
hide	隐藏检索面板	-