search-bar 条件筛选组件（齐思博）
一般用于表格上方的筛选条件，包括自定义类型、左侧按钮、右侧按钮、栅格等。
基础用法
searchBarConfig为组件配置项、searchParams为数据内容。
<template>
<div>
<h-search-bar :searchBarConfig="searchBarConfig" :search-params="searchParams"></h-search-bar>
</div>
</template>
<script setup>
import {
reactive,
toRefs
} from 'vue';
const data = reactive({
searchBarConfig: {
controlConfig: [
{
name: 'el-select',
key: 'select',
style:{
width:'200px'
},
},
{
name: 'el-input',
key: 'input',
size: 'small',
style:{
width:'200px'
},
events: {
click: () => {
console.log(data.searchParams)
}
}
},
],
searchBtnConfig: [
{
type: 'primary',
name: '重置',
key:'reset',
events: {
click: () => {
console.log(data.searchParams)
}
}
},
{
type: 'primary',
name: '查询',
events: {
click: () => {
console.log(data.searchParams)
}
}
}
],
operationBtnConfig: [
{
name: '右侧',
key:'reset'
},
{
type: 'primary',
name: '右侧查询',
events: {
click: () => {
console.log(data.searchParams)
}
}
}
]
},
searchParams: {},
})
const {
searchBarConfig,
searchParams
} = toRefs(data);
</script>
栅格显示
增加split定义每行显示几个，支持高级筛选。
<template>
<div>
<h-search-bar :split="3" :searchBarConfig="searchBarConfig" :searchParams="searchParams"></h-search-bar>
</div>
</template>
<script setup>
import {
reactive,
toRefs
} from 'vue';
const data = reactive({
searchBarConfig: {
generalSearchList: ['select1', 'select2', 'input3', 'input1'],
controlConfig: [
{
name: 'el-select',
key: 'select1',
props: {
placeholder: '请选择',
labelName: '应用分类',
options: [
{
label: '挂式空调',
value: 'MO'
}
]
}
},
{
name: 'el-select',
key: 'select2',
props: {
placeholder: '请选择',
labelName: '指定TypeID',
options: [
{
label: '挂式空调',
value: 'MO'
}
]
}
},
{
name: 'el-input',
key: 'input1',
props: {
labelName: 'typeid',
}
},
{
name: 'el-input',
key: 'input2',
props: {
labelName: '金额',
type: 'number'
}
},
{
name: 'el-input',
key: 'input3',
props: {
labelName: '金额',
type: 'number'
}
},
{
name: 'el-input',
key: 'input4',
props: {
labelName: '金额',
type: 'number'
}
},
{
name: 'el-input',
key: 'input5',
props: {
labelName: '金额',
type: 'number'
}
},
{
name: 'el-input',
key: 'input6',
props: {
labelName: '金额',
type: 'number'
}
},
{
name: 'el-input',
key: 'input7',
props: {
labelName: '金额',
type: 'number'
}
},
{
name: 'el-input',
key: 'input8',
props: {
labelName: '金额',
type: 'number'
}
},
],
searchBtnConfig: [
{
type: 'primary',
name: '重置',
key:'reset',
events: {
click: () => {
console.log(data.searchParams)
}
}
},
{
type: 'primary',
name: '查询',
events: {
click: () => {
console.log(data.searchParams)
}
}
}
],
operationBtnConfig: [
{
name: '右侧',
key:'reset'
},
{
type: 'primary',
name: '右侧查询',
events: {
click: () => {
console.log(data.searchParams)
}
}
}
]
},
searchParams: {
input1: '1'
}
})
const {
searchBarConfig,
searchParams
} = toRefs(data);
</script>
Table Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| searchParams | 绑定数据（注意key对应着searchBarConfig.controlConfig中的key值） | object | — | — |
| searchBarConfig | 组件配置项(具体见下表) | object | — | — |
searchBarConfig Attributes
注：所有选项只有再需要时再进行配置，不允许无效配置
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| split | 每行显示条件数量（不传时自适应宽度换行显示） | number | — | 0 |
| controlConfig | 筛选条件组件配置 | array | — | — |
| — | name：组件标签 | string | — | — |
| — | key：searchParams绑定数据中的key值 | string | — | — |
| — | props-其他可根据组件自定义配置项 | — | object | — |
| searchBtnConfig | 左侧按钮配置（一般跟查询、重置等） | array | — | — |
| — | type: 按钮类型（参考el-button组件） | string | — | — |
| — | name: 按钮文字 | string | — | — |
| — | icon: 按钮图标（参考h-button组件） | string | — | — |
| — | event: 按钮事件(key值为事件名，value事件内容) | object | — | — |
| operationBtnConfig | 右侧按钮配置（一般新增、返回等，配置同searchBtnConfig） | array | — | — |
| generalSearchList | 高级筛选配置，可展开收起（内容为controlConfig中的key属性，表示收起状态显示的组件） | array | — | — |