en-US

Use dMultiple to enable multiple selection.

zh-CN

通过 dMultiple 开启多选。

import { useImmer } from '@react-devui/hooks';
import { DCascader } from '@react-devui/ui';

const list = Array.from({ length: 3 }).map((_, index1) => ({
  label: `Item ${index1}`,
  value: `${index1}`,
  children: Array.from({ length: 5 }).map((_, index2) => ({
    label: `Item ${index1}-${index2}`,
    value: `${index1}-${index2}`,
    disabled: index2 === 3,
    children: Array.from({ length: 20 }).map((_, index3) => ({
      label: `Item ${index1}-${index2}-${index3}`,
      value: `${index1}-${index2}-${index3}`,
    })),
  })),
}));
export default function Demo() {
  const [select, setSelect] = useImmer(['0-0-10']);

  return (
    <>
      <DCascader
        style={{ width: 400 }}
        dList={list}
        dModel={select}
        dPlaceholder="Multiple"
        dMultiple
        dSearchable
        onModelChange={setSelect}
      ></DCascader>
      <DCascader
        style={{ width: 400 }}
        dList={list}
        dModel={['0-0-0', '1-0-0']}
        dPlaceholder="Disabled"
        dMultiple
        dSearchable
        dClearable
        dDisabled
      ></DCascader>
    </>
  );
}