Pro Element Plus

Appearance

ProSearchForm 查询表单 ​

基于 ProForm 进行封装，支持折叠展开、重置、自动查询等功能。

基础用法 ​

姓名:
年龄:
性别:
请选择性别
日期:
状态:
{}

<template>
  <div>
    <pro-search-form
      ref="formRef"
      label-width="80px"
      label-suffix=":"
      :model="form"
      :gutter="20"
      :fields="fields"
      @search="handleSearch"
    />

    <div style="white-space: pre-wrap">
      {{ JSON.stringify(form, null, 2) }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import type { ProFormFields } from '@coderhd/pro-element-plus'

const form = ref({})
const fields = computed<ProFormFields>(() => [
  {
    label: '姓名',
    prop: 'name',
    component: 'ElInput',
    componentProps: {
      placeholder: '请输入姓名',
    },
    colProps: {
      span: 8,
    },
  },
  {
    label: '年龄',
    prop: 'age',
    component: 'ElInputNumber',
    componentProps: {
      placeholder: '请输入年龄',
      style: { width: '100%' },
    },
    colProps: {
      span: 8,
    },
  },
  {
    label: '性别',
    prop: 'sex',
    component: 'ElSelect',
    componentProps: {
      placeholder: '请选择性别',
      options: [
        { label: '男', value: '1' },
        { label: '女', value: '2' },
      ],
    },
    colProps: {
      span: 8,
    },
  },
  {
    label: '日期',
    prop: 'date',
    component: 'ElDatePicker',
    componentProps: {
      placeholder: '请选择日期',
    },
    colProps: {
      span: 8,
    },
  },
  {
    label: '状态',
    prop: 'status',
    component: 'ElSwitch',
    componentProps: {
      activeValue: true,
      inactiveValue: false,
    },
    colProps: {
      span: 8,
    },
  },
])

const handleSearch = () => {
  // eslint-disable-next-line no-console
  console.log(form.value)
}
</script>

<style scoped></style>

Attributes ​

ProSearchForm基于ProForm进行封装，更多属性参考ProForm Attributes

属性名类型默认值说明
init-searchbooleantrue是否初始化查询
auto-searchbooleanfalse是否自动查询
auto-search-debouncenumber300自动搜索防抖阈值
refresh-after-searchbooleantrue是否重置后触发搜索
button-justifyjustify-contentend搜索、重置按钮对齐方式
hide-search-buttonbooleanfalse是否隐藏搜索按钮
hide-reset-buttonbooleanfalse是否隐藏重置按钮
hide-collapse-buttonbooleanfalse是否隐藏折叠按钮
default-collapsed / v-model:default-collapsedbooleanfalse默认是否折叠
refresh-button-textstring重置重置按钮文本
search-button-textstring查询查询按钮文本
collapse-button-text[string, string]展开,收起折叠按钮文本
collapsed-countnumber1折叠后显示的表单项数量

Events ​

事件名说明回调参数
search当绑定值变化时，或点击查询按钮触发的事件(params?: Record<string, any>) => void
reset重置时触发的事件() => void
collapsed展开折叠时触发的事件(collapsed: boolean) => void

Slots ​

插槽名说明
default默认插槽

Exposes ​

更多实例方法参考ElementPlus Form Methods

方法名说明参数
refresh重置表单-
search查询-
toggleCollapse切换折叠状态-