Search 查询组件

基于 Form 组件封装,支持收缩展开。

Search 组件位于 src/components/Search

用法

更复杂例子,请在线预览

<script setup lang="ts">
import { Search } from '@/components/Search'
import { reactive } from 'vue'

const schema = reactive<FormSchema[]>([
  {
    field: 'field1',
    label: 'input',
    component: 'Input'
  }
])
</script>

<template>
  <Search :schema="schema" />
</template>

Search 属性

属性说明类型可选值默认值
schema生成 Search 的布局结构数组,详见FormSchema-[]
isCol是否需要栅格布局boolean-true
labelWidth表单 label 宽度string/number-auto
layout操作按钮风格位置stringinline/bottominline
buttomPosition底部操作按钮的对齐方式stringleft/center/rightcenter
showSearch是否显示查询按钮boolean-true
showReset是否显示重置按钮boolean-true
expand是否显示伸缩按钮boolean-false
expandField伸缩的界限字段string--
inline是否是行内boolean-true

Search 事件

方法名说明回调参数
search查询后的回调data: Recordable
reset重置后的回调data: Recordable