前端开发框架
当前页

搜索BasicSearch ​

示例 ​

search.png

属性说明 ​

属性类型默认值说明
searchArraySearchOptions[]-搜索字段配置项
labelWidthnumber80标签宽度
actionSpannumber4操作项占用的span列数
  • SearchOptions 搜索字段配置项
ts
export interface SearchOptions {
  label: string;  // 搜索字段标签
  field: string;  // 搜索字段名  如: name  mail等
  span?: number;   // 字段占用的flex的宽度
  width?: number | string;  //  未使用
  component?:   // 输入框的类型
    | 'Input'
    | 'InputNumber'
    | 'DatePicker'
    | 'DatePickerTime'
    | 'DateRangePicker'
    | 'Select'
    | 'SelectMultiple';
  labelWidth?: number;  // 标签宽度 优先级高于全局 labelWidth
  slot?: string;  // 自定义slot
  componentProps?: {
    options?: any[];   // el-select 的 可选项
    format?: string;   // 时间格式  el-date-picker： date 默认 'YYYY-MM-DD'  datetime 默认 'YYYY-MM-DD HH:mm:ss' 
    defaultTime?: string; //  el-date-picker  datetime 的默认时间(格式HH:mm:ss) ; 为空时就是当前时间
  };
}

事件 ​

  • @onSearch 触发搜索事件 参数：所有的field和对应的输入框的值
  • @reset 触发重置事件 清空所有输入框内容

使用示例 ​

vue
<template>
  <basic-search
      :searchArray="searchFormSchema"
      class="search-all"
      ref="searchRef"
      @onSearch="accountList"
      @reset="accountList"
  >
    <template #stationCodeSlot="{ record, key }">
      {{ key }}当前字段field
      {{ record }}搜索框的整体数据
    </template>
  </basic-search>
</template>
<script setup lang="ts">
import { SearchOptions } from '/@/components/sys/BasicSearch/types';
interface SearchParams {
  postStationName: string;
  postStationCode: string;
}
const searchFormSchema: SearchOptions[] = [
  {
    field: 'postStationName',
    label: '岗位名称:',
    component: 'Input',
    span: 6,
    labelWidth: 80,
  },
  {
    field: 'postStationCode',
    label: '岗位编号:',
    component: 'Input',
    span: 6,
    labelWidth: 80,
    slot: 'stationCodeSlot',
  },
];

function accountList(data: SearchParams) {
  // 进行搜索操作
  console.log(data) // {postStationName: '111', postStationCode: '2222'}
}
</script>