NewbieSearch

搜索组件

Version: 1.0.0

Props

Prop name	Description	Type	Values	Default
columns	搜索项的配置, 详见 SearchItemConfig	array|func	-	() => []
disableConditions	是否禁用搜索条件	boolean	-	false
autoQuery	是否在搜索条件变化时自动搜索	boolean	-	false
gutter	搜索项的间距	string|number	-	16

Events

Event name	Properties	Description
search	queryForm Object - 搜索栏的值	点击搜索

---

详细参数

SearchItemConfig 配置

Prop name	Description	Type	Values	Default
key	检索时的关键词	string	-	""
title	检索时的关键词的显示文案	string	-	""
type	检索类型	string	"input"、"select"、"date"、"textare"、"number"	"input"
expandable	是否可展项， false 不展开, true 表示展开单选,"multiple" 表示 展开多选	boolean | string	true、false、"multiple"	false
options	检索项的选项	Array | func	-	[]
inputProps	输入组件的属性	Object	-	{}
disableConditions	是否禁用搜索条件	boolean	-	false
conditions	搜索项的条件，可选项为不同类型的内置条件	array	-	[]
defaultValue	搜索项的默认值	any	-	-

方法

名称	参数	说明
getQueryForm	() => Object	获取搜索栏的值
setQueryForm	({key: value}) => void	设置搜索栏的值

示例

---

搜索栏

姓名

学号

项目金额

20

注册日期

审核状态:

通过

未通过

待审核

可多选

性别:

男

女

<template>
	<Card title="搜索栏">
		<NewbieSearch ref="elem" :columns="items" @search="onSearch"></NewbieSearch>
	</Card>
</template>
<script setup>
import { ref } from "vue"
import { Card } from "ant-design-vue"

const elem = ref("")

const items = ref([
	{ title: "姓名", key: "name", type: "input", disableConditions: true },
	{ title: "学号", key: "stu_num", type: "textarea", inputProps: { style: { width: "300px" } } },
	{
		title: "审核状态",
		key: "status",
		expandable: "multiple",
		options: [
			{ label: "通过", value: "pass" },
			{ label: "未通过", value: "deny" },
			{ label: "待审核", value: "waiting" },
		],
	},

	{
		title: "性别",
		key: "gender",
		type: "select",
		expandable: true,
		options: [
			{ label: "男", value: "male" },
			{ label: "女", value: "female" },
		],
	},

	{ title: "项目金额", key: "amount", type: "number", conditions: ["equal", "notEqual"], defaultValue: [20, 0] },
	{ title: "注册日期", key: "registered_at", type: "date" },
])

const onSearch = () => {
	console.log(elem.value.getQueryForm())
}
</script>