weike-multi-cascader

Online Demo，How it works?

How to use?

npm install react-multi-cascader or yarn add  react-multi-cascader

const [value, setValue] = React.useState<string[]>([]);

return (
  <MultiCascader
    value={value}
    onChange={setValue}
    data={options}
    placeholder="Select Cities"
  />
)

Props

| Props | Type | Description | | ------------------- | ----------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | value | string[] | Selected value | | data | TreeNode[] | Cascader options TreeNode { title: string, value: string, children?: TreeNode, isLeaf?: boolean } | | allowClear | boolean | Whether allow clear | | placeholder | string | The input placeholder | | onChange | (newVal) => void | Callback when finishing value select | | selectAll | boolean | Whether allow select all | | className | string | The additional css class | | showBottom | boolean | 是否显示底部确认组件 | | fristColumMulti | boolean | 第一栏是否可选 | | isToolTip | boolean | 已选内容是否通过tooltip显示 | | style | React.CSSProperties | The additional style | | disabled | boolean | Whether disabled select | | okText | string | The text of the Confirm button | | cancelText | string | The text of the Cancel button | | selectAllText | string | The text of the SelectAll radio | | onCascaderChange | (node: TreeNode, operations: { add: (children: TreeNode[]) => TreeNode[] }) => void | Trigger when click a menu item | | popupTransitionName | string | Should set 'ant-slide-up' manually if antd version greater than 4.13.0 | | getPopupContainer | (props: any) => HTMLElement | Parent Node which the selector should be rendered to. Default to body. When position issues happen, try to modify it into scrollable content and position it relative | | maxTagCount | Max tag count to show. responsive will cost render performance | number | responsive |

Async Data Example

const [asyncOptions, setAsyncOptions] = React.useState([
  {
    value: 'ParentNode1',
    title: 'ParentNode1',
    // tell component this node is not a leaf node
    isLeaf: false,
  },
  {
    value: 'ParentNode2',
    title: 'ParentNode2',
  },
])

const handleCascaderChange = React.useCallback((node, { add }) => {
  // call add function to append children nodes
  if (node.value === 'ParentNode1' && !node.children) {
    setTimeout(() => {
      setAsyncOptions(
        add([
          {
            value: 'ParentNode1-1',
            title: 'ParentNode1-1',
          },
        ])
      )
    }, 1000)
  }
}, [])

    <MultiCascader
        selectAll
        data={options}
        value={state}
        onChange={(v,v1) => onChange(v, v1)}
        disabled={disabled}
        placeholder="Default"
        style={{ width: '320px' }}
        showBottom={true}
        fristColumMulti={true}
        isToolTip={true}
    />