Search 搜索

代码演示

基础用法

<template>
    <x-search>
        <x-search-item>
            <a-input></a-input>
        </x-search-item>
        <x-search-item suffix>
            <a-space>
                <a-button>重置</a-button>
                <a-button
                    ghost
                    type="primary">
                    查询
                </a-button>
            </a-space>
        </x-search-item>
    </x-search>
</template>

<script setup></script>

<style lang="less" scoped></style>

折叠

<template>
    <x-search
        :collapsed="collapsed"
        :collapsed-rows="1"
        :columns="3"
        :label-col="{ style: { width: '100px' } }">
        <x-search-item label="规则名称">
            <a-input></a-input>
        </x-search-item>
        <x-search-item label="描述">
            <a-input></a-input>
        </x-search-item>
        <x-search-item label="服务调用次数">
            <a-input></a-input>
        </x-search-item>
        <x-search-item label="状态">
            <a-select></a-select>
        </x-search-item>
        <x-search-item label="上次调度时间">
            <a-date-picker></a-date-picker>
        </x-search-item>
        <x-search-item suffix>
            <a-space>
                <a-button>重置</a-button>
                <a-button
                    ghost
                    type="primary">
                    查询
                </a-button>
                <a-typography-link @click="() => (collapsed = !collapsed)">
                    <template v-if="collapsed"
                        >展开
                        <down-outlined class="ml-4-1 fs-10"></down-outlined>
                    </template>
                    <template v-else
                        >收起
                        <up-outlined class="ml-4-1 fs-10"></up-outlined>
                    </template>
                </a-typography-link>
            </a-space>
        </x-search-item>
    </x-search>
</template>

<script setup>
import { ref } from 'vue'
import { DownOutlined, UpOutlined } from '@ant-design/icons-vue'

const collapsed = ref(true)
</script>

<style lang="less" scoped></style>

自定义配置

<template>
    <x-search
        :columns="3"
        :label-col="{ style: { width: '100px' } }">
        <x-search-item>
            <template #label>
                规则名称
                <a-tooltip title="规则名称是唯一的 key">
                    <question-circle-outlined class="ml-4-1"></question-circle-outlined>
                </a-tooltip>
            </template>
            <a-input></a-input>
        </x-search-item>
        <x-search-item label="状态">
            <a-input></a-input>
        </x-search-item>
        <x-search-item suffix>
            <a-space>
                <a-button>重置</a-button>
                <a-button
                    ghost
                    type="primary">
                    查询
                </a-button>
            </a-space>
        </x-search-item>
    </x-search>
</template>

<script setup>
import { QuestionCircleOutlined } from '@ant-design/icons-vue'
</script>

<style lang="less" scoped></style>

API

Props

名称	说明	类型	默认值
columns	显示的栅格数量	number Object	24
gutter	栅格间隔，可以写成像素值设置水平间隔 。或者使用数组形式同时设置 [水平间距, 垂直间距]	number array	0
collapsed	是否默认折叠	boolean	false
collapsed-rows	默认展示的行数	number	1
bordered	是否显示边框，显示边框时将会使用 Card 组件包裹	boolean	true

提示

Search 组件基于 AForm 组件扩展，支持其所有参数。详见：Form 组件

SearchItem Props

名称	说明	类型	默认值
span	栅格占据的列数	number	1
xs	<576px 栅格占据的列数	number	-
sm	≥576px 栅格占据的列数	number	-
md	≥768px 栅格占据的列数	number	-
lg	≥992px 栅格占据的列数	number	-
xl	≥1200px 栅格占据的列数	number	-
xxl	≥1600px 栅格占据的列数	number	-
offset	栅格左侧的间隔格数	number	0
suffix	栅格后缀，只能存在一个	boolean	false

提示

SearchItem 组件基于 AFormItem 组件扩展，支持其所有参数以及插槽。详见：FormItem 组件