---
title: WKPickerMultiSelector选择器
group:
  title: 表单组件
  path: /form/
---

## 何时使用

WKPickerMultiSelector 多级 picker 选择器组件

## 基本使用

```tsx
/**
 * title: 基本使用
 * desc: 基本使用方法
 */
import React, { useState } from 'react';
import PageWrapper from '../PageWrapper';
import { WKPickerMultiSelector } from '@wakeapp/components';

const options = [
  [
    { label: '周一', value: 1 },
    { label: '周二', value: 2 },
    { label: '周三', value: 3 },
    { label: '周四', value: 4 },
    { label: '周五', value: 5 },
    { label: '周六', value: 6 },
    { label: '周日', value: 7 },
  ],
  [
    { label: '上午', value: 1 },
    { label: '下午', value: 2 },
  ],
];

export default () => {
  const [val, setVal] = useState<number[]>();
  const handleChange = (evt: { detail: { value: number[] } }) => {
    setVal(evt.detail.value);
  };

  return (
    <PageWrapper title="基本使用">
      <WKPickerMultiSelector
        style={{ width: '100%', padding: '4px 8px', cursor: 'pointer' }}
        options={options}
        placeholder="请选择时间"
        value={val}
        onChange={handleChange}
      ></WKPickerMultiSelector>
    </PageWrapper>
  );
};
```

## 级联选择

```tsx
/**
 * title: 级联选择
 * desc: 异步生成 options
 */
import React, { useState, useEffect } from 'react';
import PageWrapper from '../PageWrapper';
import { WKPickerMultiSelector } from '@wakeapp/components';

const multipleOptionsDynamic: Array<[string, string[]]> = [
  ['广东', ['珠海', '中山', '深圳']],
  ['广西', ['桂林', '南宁']],
];

export default () => {
  const [val, setVal] = useState<string[]>();
  const [options, setOptions] = useState<Array<Array<{ value: string; label: string }>>>();

  const handleChange = (evt: { detail: { value: number[] } }) => {
    setVal(evt.detail.value);
  };

  const handleColumnChange = (evt: { detail: { selectedIndex: number[] } }) => {
    console.log('column change', evt);
    const { selectedIndex } = evt.detail;
    const selected = selectedIndex[0];
    const children = multipleOptionsDynamic[selected][1];

    // 动态设置子列表
    setOptions(v => {
      const clone = [...v!];
      clone[1] = children.map(i => ({ value: i, label: i }));
      return clone;
    });
  };

  // 初始化级联数据
  useEffect(() => {
    setOptions([
      multipleOptionsDynamic.map(i => ({ value: i[0], label: i[0] })),
      multipleOptionsDynamic[0][1].map(i => ({ value: i, label: i })),
    ]);
  }, []);

  return (
    <PageWrapper title="级联选择">
      <WKPickerMultiSelector
        style={{ width: '100%', padding: '4px 8px', cursor: 'pointer' }}
        options={options}
        value={val}
        onChange={handleChange}
        onColumnChange={handleColumnChange}
      ></WKPickerMultiSelector>
    </PageWrapper>
  );
};
```

## 属性

<API src='@wakeapp/components/WKPickerMultiSelector/index.d.ts'></API>
