search-bar 条件筛选组件（齐思博）

一般用于表格上方的筛选条件，包括自定义类型、左侧按钮、右侧按钮、栅格等。

基础用法

searchBarConfig为组件配置项、searchParams为数据内容。

<template>
  <div>
    <h-search-bar :searchBarConfig="searchBarConfig" :search-params="searchParams"></h-search-bar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchBarConfig: {
        controlConfig: [
          {
            name: 'h-select-custom',
            key: 'select',
            style:{
              width:'200px'
            },
          },
          {
            name: 'h-input-custom',
            key: 'input',
            size: 'small',
            style:{
              width:'200px'
            },
            events: {
              click: () => {
                console.log(this.searchParams)
              }
            }
          },
        ],
        searchBtnConfig: [
          {
            type: 'third',
            name: '重置',
            key:'reset',
            events: {
              click: () => {
                console.log(this.searchParams)
              }
            }
          },
          {
            type: 'first',
            name: '查询',
            events: {
              click: () => {
                console.log(this.searchParams)
              }
            }
          }
        ],
        operationBtnConfig: [
          {
            type: 'third',
            name: '右侧',
            key:'reset'
          },
          {
            type: 'first',
            name: '右侧查询',
            events: {
              click: () => {
                console.log(this.searchParams)
              }
            }
          }
        ]
      },
      searchParams: {},
    }
  }
}
</script>

显示代码

栅格显示

增加split定义每行显示几个，支持高级筛选。

<template>
  <div>
    <h-search-bar :split="3" :searchBarConfig="searchBarConfig" :searchParams="searchParams"></h-search-bar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchBarConfig: {
        generalSearchList: ['select1', 'select2', 'input3', 'input1'],
        controlConfig: [
          {
            name: 'h-select-custom',
            key: 'select1',
            propData: {
              placeholder: '请选择',
              labelName: '应用分类',
              options: [
                {
                  label: '挂式空调',
                  value: 'MO'
                }
              ]
            }
          },
          {
            name: 'h-select-custom',
            key: 'select2',
            propData: {
              placeholder: '请选择',
              labelName: '指定TypeID',
              options: [
                {
                  label: '挂式空调',
                  value: 'MO'
                }
              ]
            }
          },
          {
            name: 'h-input-custom',
            key: 'input1',  
            propData: {
              labelName: 'typeid',
            }
          },
          {
            name: 'h-input-custom',
            key: 'input2',  
            propData: {
              labelName: '金额',
              type: 'number'
            }
          },
          {
            name: 'h-input-custom',
            key: 'input3',  
            propData: {
              labelName: '金额',
              type: 'number'
            }
          },
          {
            name: 'h-input-custom',
            key: 'input4',  
            propData: {
              labelName: '金额',
              type: 'number'
            }
          },
          {
            name: 'h-input-custom',
            key: 'input5',  
            propData: {
              labelName: '金额',
              type: 'number'
            }
          },
          {
            name: 'h-input-custom',
            key: 'input6',  
            propData: {
              labelName: '金额',
              type: 'number'
            }
          },
          {
            name: 'h-input-custom',
            key: 'input7',  
            propData: {
              labelName: '金额',
              type: 'number'
            }
          },
          {
            name: 'h-input-custom',
            key: 'input8',
            propData: {
              labelName: '金额',
              type: 'number'
            }
          },
        ],
        searchBtnConfig: [
          {
            type: 'third',
            name: '重置',
            key:'reset',
            events: {
              click: () => {
                console.log(this.searchParams)
              }
            }
          },
          {
            type: 'first',
            name: '查询',
            events: {
              click: () => {
                console.log(this.searchParams)
              }
            }
          }
        ],
        operationBtnConfig: [
          {
            type: 'third',
            name: '右侧',
            key:'reset'
          },
          {
            type: 'first',
            name: '右侧查询',
            events: {
              click: () => {
                console.log(this.searchParams)
              }
            }
          }
        ]
      },
      searchParams: {
        input1: '1'
      },
    }
  }
}
</script>

显示代码

Table Attributes

参数	说明	类型	可选值	默认值
searchParams	绑定数据（注意key对应着searchBarConfig.controlConfig中的key值）	object	—	—
searchBarConfig	组件配置项(具体见下表)	object	—	—

searchBarConfig Attributes

注：所有选项只有再需要时再进行配置，不允许无效配置

参数	说明	类型	可选值	默认值
split	每行显示条件数量（不传时自适应宽度换行显示）	number	—	0
controlConfig	筛选条件组件配置	array	—	—
—	name：组件标签	string	—	—
—	key：searchParams绑定数据中的key值	string	—	—
—	其他可根据组件自定义配置项	—	—	—
searchBtnConfig	左侧按钮配置（一般跟查询、重置等）	array	—	—
—	type: 按钮类型（参考h-button组件）	string	—	—
—	name: 按钮文字	string	—	—
—	icon: 按钮图标（参考h-button组件）	string	—	—
—	event: 按钮事件(key值为事件名，value事件内容)	object	—	—
operationBtnConfig	右侧按钮配置（一般新增、返回等，配置同searchBtnConfig）	array	—	—
generalSearchList	高级筛选配置，可展开收起（内容为controlConfig中的key属性，表示收起状态显示的组件）	array	—	—