superui
Search K

Appearance

搜索框业务组件 ​

基础用法 ​

用户姓名:
基础用法
根据配置生成带搜索、重置按钮的搜索框
<template>
  <su-search-form
    class="vp-raw"
    resetBtn
    :searchList="searchData"
    :searchParam="searchParam"
    @search="handleSearch"
    @reset="handleReset"
  />
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { message } from 'ant-design-vue'

type obj = {
  [key:string] : string | number | string[] | number[]
}

type itemType = {
  key: string;
  search: string;
  value:  string | number | string[] | number[];
}

const columns = [
  {
    key: "username",
    title: "用户姓名",
    search: "input",
    value: ""
  },
];
let searchData: itemType[] = columns.filter((item: itemType) => item.search);
let searchParam: obj = reactive({});

// 初始化搜索值
const initSearch = () => {
  searchData.forEach((item: itemType) => {
    searchParam[item.key] = item.value;
  });
};
initSearch();

// 搜索
const handleSearch = () => {
  message.success('点击搜索按钮')
}

// 重置
const handleReset = () => {
  initSearch()
  message.info('点击重置按钮')
}
</script>

多种搜索组件用法 ​

用户姓名:
状态:
展开
多种搜索组件用法
下拉、数字输入、时间选择等
<template>
  <su-search-form
    class="vp-raw"
    resetBtn
    :expandSpan="8"
    :colspan="8"
    :searchList="searchData"
    :searchParam="searchParam"
    @search="handleSearch"
    @reset="handleReset"
  />
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { message } from 'ant-design-vue'

type obj = {
  [key:string] : string | number | string[] | number[] | boolean;
}

type itemType = {
  key: string;
  search: string;
  value:  string | number | string[] | number[] | boolean;
}

const columns = [
  {
    key: "username",
    title: "用户姓名",
    search: "input",
    value: "",
    colspan: 8,
  },
  {
    key: "status",
    title: "状态",
    search: "select",
    colspan: 8,
    value: "",
    enum: [
      {
        label: "在线",
        value: 1
      },
      {
        label: "离线",
        value: 0
      }
    ]
  },
  {
    key: "checked",
    title: "数字",
    search: "inputNumber",
    value: 0,
    colspan: 8,
  },
  {
    key: "time",
    title: "日期",
    search: "datePicker",
    value: "",
    colspan: 8,
  },
  {
    key: "timeranger",
    title: "日期范围",
    search: "dateRangePicker",
    value: [],
  },
];
let searchData: itemType[] = columns.filter((item: itemType) => item.search);
let searchParam: obj = reactive({});

// 初始化搜索值
const initSearch = () => {
  searchData.forEach((item: itemType) => {
    searchParam[item.key] = item.value;
  });
};
initSearch();

// 搜索
const handleSearch = () => {
  console.log(searchParam)
  message.success('点击搜索按钮')
}

// 重置
const handleReset = () => {
  initSearch()
  message.info('点击重置按钮')
}
</script>

动态获取下拉列表数据 ​

状态:
动态获取下拉列表数据
设置api请求动态获取
<template>
  <su-search-form
    class="vp-raw"
    resetBtn
    :colspan="8"
    :searchList="searchData"
    :searchParam="searchParam"
    @search="handleSearch"
    @reset="handleReset"
  />
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { message } from 'ant-design-vue'

type obj = {
  [key:string] : string | number | string[] | number[] | boolean;
}

type itemType = {
  key: string;
  search: string;
  value:  string | number | string[] | number[] | boolean;
}

// 模拟请求数据
const getSelectData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        code: 200,
        data: [
          {
            label: "在线",
            value: 1
          },
          {
            label: "离线",
            value: 0
          }
        ]
      })
    },2000)
  })
}

const columns = [
  {
    key: "status",
    title: "状态",
    search: "select",
    value: "",
    api: getSelectData
  },
];
let searchData: itemType[] = columns.filter((item: itemType) => item.search);
let searchParam: obj = reactive({});

// 初始化搜索值
const initSearch = () => {
  searchData.forEach((item: itemType) => {
    searchParam[item.key] = item.value;
  });
};
initSearch();

// 搜索
const handleSearch = () => {
  console.log(searchParam)
  message.success('点击搜索按钮')
}

// 重置
const handleReset = () => {
  initSearch()
  message.info('点击重置按钮')
}
</script>

组件参数配置 ​

参数

说明

类型

示例

searchList搜索项itemType[]配置请查看下方SearchList配置项
searchParam搜索参数string、number、string[]、number[]、boolean数值需要根据searchList去生成,请查看下方SearchParam生成方法
extra搜索项slot#extra
showOtherBtn是否在重置按钮左侧添加一个按钮boolean--
btnText添加按钮的文字内容string--
isOpen是否全部显示搜索项boolean--

回调方法 ​

参数

说明

类型

示例

search点击搜索按钮function--
reset点击重置按钮function--
add点击新增的按钮function--
itemChange组件值改变时触发的回调function--

SearchList配置项 ​

参数

说明

类型

示例

name组件名称stringinput 、InputNumber 、select 、timePicker 、 timeRangePicker 、datePicker 、dateRangePicker 、cascader
key组件键值string唯一的key值
title组件左侧名称string--
value组件初始值--string、number、string[]、number[]、boolean
enumselect组件搜索项array下拉列表数据，默认取value、label
labelName自定义枚举文字string更改下拉数据取值
valueName自定义枚举值string更改下拉数据取值
api动态枚举function获取接口返回的下拉数据
params动态获取枚举的参数object{}
style组件左侧文字样式string设置文字行内样式
format时间类选项输出的格式string使用dayjs格式化时间格式：'YYYY MM DD hh:mm:ss'
mininputNumber组件最小值number沿用自antd
maxinputNumber组件最大值number沿用自antd
placeholder组件无值时显示的文字string沿用自antd
labelCol组件左侧文件宽度string沿用自antd
labelAlign组件左侧文件定位string沿用自antd
wrapperCol组件宽度string沿用自antd
picker日期选项样式string沿用自antd

SearchParam生成方法 ​

let searchParam: any = reactive({});
// 初始化搜索值
const initSearch = () => {
  searchData.forEach((item: itemType) => {
    searchParam[item.key] = item.value || '';
  });
};
initSearch();