Filter 筛选

代码演示

基础用法

<template>
    <x-filter :model="formData">
        <x-filter-item label="品牌">
            <x-tag-select
                v-model="formData.brand"
                :options="brandOptions"></x-tag-select>
        </x-filter-item>
        <x-filter-item label="分类">
            <x-tag-select
                v-model="formData.classification"
                :options="classificationOptions"></x-tag-select>
        </x-filter-item>
        <x-filter-item label="机身内存">
            <x-tag-select
                v-model="formData.memory"
                :options="memoryOptions"></x-tag-select>
        </x-filter-item>
        <x-filter-item label="CPU型号">
            <x-tag-select
                v-model="formData.cpu"
                :options="cpuOptions"
                multiple></x-tag-select>
        </x-filter-item>
    </x-filter>
</template>

<script setup>
import { ref } from 'vue'
import { useForm } from '@/hooks'

const { formData } = useForm()

const brandOptions = ref([
    { label: '小米', value: 1 },
    { label: '荣耀', value: 2 },
    { label: 'vivo', value: 3 },
    { label: '华为', value: 4 },
    { label: '苹果', value: 5 },
    { label: 'oppo', value: 6 },
    { label: '魅族', value: 7 },
])
const classificationOptions = ref([
    { label: '手机', value: 1 },
    { label: '二手手机', value: 2 },
    { label: '合约机', value: 3 },
])
const memoryOptions = ref([
    { label: '全部', value: 0, unlimited: true },
    { label: '1TB', value: 1 },
    { label: '512GB', value: 2 },
    { label: '256GB', value: 3 },
    { label: '128GB', value: 4 },
    { label: '64GB', value: 5 },
    { label: '32GB及以下', value: 6 },
    { label: '未公布', value: 7 },
    { label: '未上市', value: 8 },
])
const cpuOptions = ref([
    { label: '全部', value: 0, unlimited: true },
    { label: '骁龙8+ Gen 1', value: 1 },
    { label: '第二代骁龙8', value: 2 },
    { label: '天玑9200', value: 3 },
    { label: '天玑8200', value: 4 },
    { label: 'A16', value: 5 },
    { label: 'A15', value: 6 },
    { label: 'Apple A系列', value: 7 },
    { label: '第三代骁龙8', value: 8 },
])

formData.value = {
    brand: 1,
    classification: 1,
    memory: 0,
    cpu: [0],
}
</script>

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

自定义

<template>
    <x-filter :label-col="{ style: { width: '80px' } }">
        <x-filter-item label="品牌">
            <x-tag-select
                v-model="formData.brand"
                :options="brandOptions"></x-tag-select>
        </x-filter-item>
        <x-filter-item label="价格区间">
            <a-space>
                <template #split>-</template>
                <a-input :style="{ width: '100px' }"></a-input>
                <a-input :style="{ width: '100px' }"></a-input>
            </a-space>
        </x-filter-item>
        <x-filter-item label="时间区间">
            <a-range-picker></a-range-picker>
        </x-filter-item>
    </x-filter>
</template>

<script setup>
import { ref } from 'vue'
import { useForm } from '@/hooks'

const { formData } = useForm()

const brandOptions = ref([
    { label: '小米', value: 1 },
    { label: '荣耀', value: 2 },
    { label: 'vivo', value: 3 },
    { label: '华为', value: 4 },
    { label: '苹果', value: 5 },
    { label: 'oppo', value: 6 },
    { label: '魅族', value: 7 },
])

formData.value = {
    brand: 1,
    classification: 1,
}
</script>

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

API

Filter

提示

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

FilterItem

提示

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