---
title: WKFilter 条件过滤
group:
  title: 反馈组件
  path: /feedback/
---

## 何时使用

WKFilter 条件过滤组件，用于执行页面中依据选中的条件进行筛选过滤。

## 基础使用

```tsx
/**
 * title: 基础使用
 * desc: 基础使用
 */
import React, { useState } from 'react';
import PageWrapper from '../PageWrapper';
import { WKFilter, WKDropdownSelect } from '@wakeapp/components';

export default () => {
  const options1 = [
    { label: '珠海', value: 1 },
    { label: '中山', value: 2, disabled: true },
    { label: '北京', value: 3 },
    { label: '上海', value: 4 },
    { label: '河北', value: 5 },
    { label: '杭州', value: 6 },
    { label: '郑州', value: 7, disabled: true },
    { label: '长沙', value: 8 },
    { label: '西藏', value: 9, disabled: true },
    { label: '哈尔滨', value: 10 },
  ];

  const options2 = [
    { label: '炸鸡', value: 1 },
    { label: '啤酒', value: 2, disabled: true },
    { label: '烧烤', value: 3 },
    { label: '麻辣烫', value: 4 },
    { label: '火锅', value: 5 },
  ];

  const [v1, setV1] = useState();
  const [v2, setV2] = useState();

  return (
    <PageWrapper title="基础使用">
      <WKFilter>
        <WKDropdownSelect options={options1} placeholder="地点" value={v1} onChange={setV1} />
        <WKDropdownSelect options={options2} placeholder="美食" value={v2} onChange={setV2} />
      </WKFilter>
    </PageWrapper>
  );
};
```

## 自定义菜单内容&下拉多选

```tsx
/**
 * title: 自定义菜单内容&下拉多选
 * desc: 自定义菜单内容&下拉多选
 */
import React, { useState } from 'react';
import PageWrapper from '../PageWrapper';
import { WKFilter, WKDropdownSelect, WKCheckTag, WKSortTag, View } from '@wakeapp/components';

export default () => {
  const options1 = [
    { label: '珠海', value: 1 },
    { label: '中山', value: 2, disabled: true },
    { label: '北京', value: 3 },
    { label: '上海', value: 4 },
    { label: '河北', value: 5 },
    { label: '杭州', value: 6 },
    { label: '郑州', value: 7, disabled: true },
    { label: '长沙', value: 8 },
    { label: '西藏', value: 9, disabled: true },
    { label: '哈尔滨', value: 10 },
  ];

  const options2 = [
    { label: '炸鸡', value: 1 },
    { label: '啤酒', value: 2, disabled: true },
    { label: '烧烤', value: 3 },
    { label: '麻辣烫', value: 4 },
    { label: '火锅', value: 5 },
  ];

  const [v1, setV1] = useState();
  const [count, setCount] = useState(false);
  const [sort, setSort] = useState();

  return (
    <PageWrapper title="自定义菜单内容&下拉多选">
      <WKFilter>
        <WKDropdownSelect options={options1} placeholder="地点" multiple value={v1} onChange={setV1} />
        <View style={{ flex: 1, textAlign: 'center' }}>
          <WKCheckTag
            round
            onChange={() => {
              setCount(v => !v);
              setSort(undefined);
            }}
            value={count}
            style={{ margin: '0rpx' }}
          >
            综合
          </WKCheckTag>
        </View>
        <View style={{ flex: 1, textAlign: 'center' }}>
          <WKCheckTag
            effect="ghost"
            onChange={() => {
              setCount(v => !v);
              setSort(undefined);
            }}
            value={count}
            style={{ margin: '0rpx' }}
          >
            销量
          </WKCheckTag>
        </View>
        <View style={{ flex: 1, textAlign: 'center' }}>
          <WKSortTag round effect="ghost" onChange={setSort} value={sort} style={{ margin: '0rpx' }}>
            排序
          </WKSortTag>
        </View>
      </WKFilter>
    </PageWrapper>
  );
};
```

<API src="@wakeapp/components/WKFilter/index.d.ts"></API>

## DropdownItemOption

| Name     | Description | Type               | Default |
| -------- | ----------- | ------------------ | ------- |
| label    | --          | `string`           |         |
| value    | --          | `number \| string` |         |
| disabled | --          | `boolean`          |         |
