Filter 筛选

代码演示

基础用法

<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>

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

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

自定义

<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>

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

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

API

Filter

提示

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

FilterItem

提示

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