# SearchLayer
搜索层-searchLayer
用于对表格数据进行查询等操作
在搜索层中,主要使用内置的单表单组件,如遇到复杂的逻辑,可选用自定义的表单组件,如下面使用示例中的Custom
,就是一个自定义组件,引入到当前组件中;自定义组件有什么规范?看完该章节后,可移步阅读单表单组件章节。
# 使用示例
<template>
<ry-layer-page
:search-layer="searchLayer"
:operate-layer="operateLayer"
:display-layer="displayLayer"
/>
</template>
<script>
import Custom from './Custom'
export default {
data() {
return {
searchLayer: {
labelAfter: ':',
labelWidth: '100px',
size: 'mini',
formWidth: 317,
searchName: '查询',
resetName: '重置',
form: [
{
name: 'Custom',
component: Custom //自定义组件
},
{
label: '科室负责人',
model: 'deptLeader',
regExp: 'english',
component: 'FormInput' //内置组件
},
{
label: '预警时间',
type: 'daterange',
startTimeLabel: 'startTimeYJ',
endTimeLabel: 'endTimeYJ',
component: 'FormDateRange' //内置组件
}
]
}
}
}
}
</script>
# 默认传参
- 当封装组件时,可根据params中的某个属性作为类型判断
- 可传入默认的数据
<template>
<ry-layer-page
:search-layer="searchLayer"
:operate-layer="operateLayer"
:display-layer="displayLayer"
/>
</template>
<script>
import Custom from './Custom'
export default {
data() {
return {
// 搜索层
searchLayer: {
labelWidth: '120px',
size: 'small',
operateSize: 'mini',
searchName: '查询',
resetName: '重置',
params: {
khjdYear: `${new Date().getFullYear()}`, // 传入默认的时间
type: this.getType() // 区分类型
},
form
}
}
}
}
</script>
# beforeSearch 前置搜索钩子
用于搜索前的参数修改
<script>
import Custom from './Custom'
export default {
data() {
return {
// 搜索层
searchLayer: {
labelWidth: '120px',
size: 'small',
operateSize: 'mini',
searchName: '查询',
resetName: '重置',
beforeSearch: this.searchCallback,
form
}
}
}
methods: {
//在自定义查询事件中,将params的值添加一个属性
searchCallback(params) {
params.wtxz = params.wtxz && params.wtxz.join(',');
},
},
}
</script>
# 属性
属性 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
searchName | 查询按钮别称 | string | — | 搜索 |
resetName | 重置按钮别称 | string | — | 重置 |
formWidth | 用于控制该表单内组件的宽度 | string | — | — |
size | 用于控制该表单内组件的尺寸 | string | medium / small / mini | — |
labelAfter | 表单项的分割形式 | string | — | : |
labelWidth | 表单域标签的宽度,例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。 | string | — | — |
labelPosition | 表单域标签的位置,如果值为 left 或者 right 时,则需要设置 label-width | string | right/left/top | right |
labelWidth | 表单域标签的宽度,例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。 | string | — | — |
inlineMessage | 是否以行内形式展示校验信息 | boolean | — | false |
disabled | 是否禁用该表单内的所有组件。若设置为 true,则表单内组件上的 disabled 属性不再生效 | boolean | — | false |
hideRequiredAsterisk | 是否隐藏必填字段的标签旁边的红色星号 | boolean | — | false |
statusIcon | 是否在输入框中显示校验结果反馈图标 | boolean | — | false |
validateOnRuleChange | 是否在 rules 属性改变后立即触发一次验证 | boolean | — | true |
params | params 会合并到查询接口中 | object | — | — |
beforeSearch | 用于搜索前的参数修改 | function(params) | — | — |
form | 移步阅读 单表单组件章节 | — | — | — |
← 快速上手 OperateLayer →