fs-admin

Appearance

proSearch 表单查询 ​

基本用法 ​

vue
<script setup lang="ts">
const searchList = ref([
  {
    label: '用户名',
    value: '',
    name: 'name',
    type: 'input',
  },
  ...
])
</script>

<template>
  <pro-search
    :searchList="searchList"
    @query="handleQuery"
    @reset="handleReset"
  >
    <template #query="{ query }">
      <el-form-item label="插槽">
        <el-input v-model="query.s"></el-input>
      </el-form-item>
    </template>
  </pro-search>
</template>

属性 ​

参数说明类型默认值可选值
searchList（必传）搜索列表BasicFormItem[]
queryConfig查询配置Query{maxShow: 3,col: {xs: 24,sm: 12,md: 8,lg: 6},fold: true,fluid:true}

BasicFormItem ​

ts
type BasicFormItem = {
  label: string // 表单标签
  value: any // 表单值
  name: string // 接口需要的字段名
  type: string // 表单类型
  placeholder?: string
  children?: Array<BasicFormItem>
  options?: Array<any> // 下拉框选项
  search?: boolean // 是否出现在搜索框
  required?: boolean // 是否必填
  rules?: FormItemRule | FormItemRule[] // 表单验证规则
  span?: number // 栅格占位
  props?: object // 组件属性
  events?: object // 组件事件
  request?: Function // 异步请求数据
  slots?: Array<FormSlot> // 自定义插槽
  notFormItem?: boolean // 是否为表单项
  hidden?: boolean // 是否隐藏
  extra?: any // 额外信息
  formItemProps?: object // formItem属性
  formItemSlots?: Array<FormSlot> // formItem插槽
}

Query ​

ts
interface Query {
  maxShow?: number // 最多显示查询条件数量
  col?: ColProps // 列配置
  fold: boolean // 是否开启展开收起功能
  searchText?: string // 查询按钮文字
  fluid?: boolean // 是否开启栅格布局
}

方法 ​

方法名说明类型参数
query查询FunctionqueryData
reset重置FunctionqueryData

Exposes ​

名称说明参数
queryData查询数据