SearchForm

示例

在 formGrid 基础上扩展，完全支持 formGrid 全部功能

基本使用

<template>
  <div>
    <SuperSearchForm :field="field" :model="form" @search="_search" @reset="_reset"></SuperSearchForm>
  </div>
</template>

<script lang="ts" setup>
import {  reactive } from 'vue'
import { ElMessage } from "element-plus"

const form = reactive({
  name: '',
  sex: '',
  phone: '',
  startTime: '',
  endTime: ''
})
const field = [
  {
    label: '姓名',
    name: 'name',
    el: 'ElInput',
    tooltip: '这是一个提示信息',
    span: 2,
  },
  {
    label: '性别',
    name: 'sex',
    el: 'ElSelect',
    options: [
      { label: '男', value: '1' },
      { label: '女', value: '2' },
    ],
    span: 2,
  },
  {
    label: '手机号',
    name: 'phone',
    el: 'ElInput',
    span: 2,
  },
  {
    label: '开始时间',
    name: 'startTime',
    el: 'ElDatePicker',
    span: 2,
  },
  {
    label: '结束时间',
    name: 'endTime',
    el: 'ElDatePicker',
    span: 2,
  },
]

const _search = () => {
  ElMessage.success('查询成功')
}

const _reset = () => {
  ElMessage.success('重置成功')
}
</script>

关闭自动查询功能

关闭后需要手动点击查询按钮

<template>
  <div>
    <SuperSearchForm :field="field" :model="form" :autoSearch="false" @search="_search" @reset="_reset"></SuperSearchForm>
  </div>
</template>

<script lang="ts" setup>
import {  reactive } from 'vue'
import { ElMessage } from "element-plus"

const form = reactive({
  name: '',
  sex: '',
  phone: '',
  startTime: '',
  endTime: ''
})
const field = [
  {
    label: '姓名',
    name: 'name',
    el: 'ElInput',
    tooltip: '这是一个提示信息',
    span: 2,
  },
  {
    label: '性别',
    name: 'sex',
    el: 'ElSelect',
    options: [
      { label: '男', value: '1' },
      { label: '女', value: '2' },
    ],
    span: 2,
  },
  {
    label: '手机号',
    name: 'phone',
    el: 'ElInput',
    span: 2,
  },
  {
    label: '开始时间',
    name: 'startTime',
    el: 'ElDatePicker',
    span: 2,
  },
  {
    label: '结束时间',
    name: 'endTime',
    el: 'ElDatePicker',
    span: 2,
  },
]

const _search = () => {
  ElMessage.success('查询成功')
}

const _reset = () => {
  ElMessage.success('重置成功')
}
</script>

查询按钮前后插槽

<template>
  <div>
    <SuperSearchForm :field="field" :model="form" @search="_search" @reset="_reset">
      <template #beforeContent>
        <el-button type="primary">新增</el-button>
      </template>
      <template #afterContent>
        <el-button type="primary">删除</el-button>
      </template>
    </SuperSearchForm>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { ElMessage, ElButton } from "element-plus"

const form = reactive({
  name: '',
})
const field = [
  {
    label: '姓名',
    name: 'name',
    el: 'ElInput',
    span: 2,
  },
]

const _search = () => {
  ElMessage.success('查询成功')
}

const _reset = () => {
  ElMessage.success('重置成功')
}
</script>

关闭展开收起/查询/重置按钮

通过设置 ifCollapsed/hideSearch/hideReset

<template>
  <div>
    <SuperSearchForm :field="field" :model="form" :ifCollapsed="false" :hideSearch="false" :hideReset="false" @search="_search" @reset="_reset"></SuperSearchForm>
  </div>
</template>

<script lang="ts" setup>
import {  reactive } from 'vue'
import { ElMessage } from "element-plus"

const form = reactive({
  name: '',
  sex: '',
  phone: '',
  startTime: '',
  endTime: ''
})
const field = [
  {
    label: '姓名',
    name: 'name',
    el: 'ElInput',
    tooltip: '这是一个提示信息',
    span: 2,
  },
  {
    label: '性别',
    name: 'sex',
    el: 'ElSelect',
    options: [
      { label: '男', value: '1' },
      { label: '女', value: '2' },
    ],
    span: 2,
  },
  {
    label: '手机号',
    name: 'phone',
    el: 'ElInput',
    span: 2,
  },
  {
    label: '开始时间',
    name: 'startTime',
    el: 'ElDatePicker',
    span: 2,
  },
  {
    label: '结束时间',
    name: 'endTime',
    el: 'ElDatePicker',
    span: 2,
  },
]

const _search = () => {
  ElMessage.success('查询成功')
}

const _reset = () => {
  ElMessage.success('重置成功')
}
</script>

API

Props

参数	说明	类型	可选值	默认值
field	表单配置列	formGridItemProps[]	-	[]
model	表单数据绑定	object	-	{}
searchCol	响应式布局参数	number/object	-	{ xs: 1, sm: 2, md: 3, lg: 4, xl: 4 }
ifCollapsed	是否显示展开/收起	boolean	true/false	true
ifCardStyle	是否使用 card 样式	boolean	true/false	true
autoSearch	是否开启自动搜索	boolean	true/false	true
hideReset	是否隐藏重置按钮	boolean	true/false	true

Slots

插槽名	说明
beforeContent	往查询按钮前面添加内容
afterContent	往查询按钮后面添加内容