Cascader 级联选择

级联选择组件。支持嵌套（字表表示法）和扁平（父指针表示法）的树形数据结构。

Usage

全部引入

import { Cascader } from 'beeshell';

按需引入

import { Cascader } from 'beeshell/dist/components/Cascader';

Examples

Cascader 与 BottomModal 组合使用

Code

详细 Code

import { Cascader } from 'beeshell';

// 嵌套（字表表示法）表示的树形结构
const nestData = [
  {
    label: '父节点1',
    id: 1,
    children: [
          { label: '子节点1', id: 2 },
          { label: '子节点2', id: 3 }
    ]
  }
]

<Cascader
  data={nestData}
  dataStructureType='nested'
  value={[2]}
  onChange={(value) => {
    console.log(value)
  }}
/>

// 扁平（父指针表示法）表示的树形结构
const flattenedData = [
  { label: '父节点1', id: 1 },
  { label: '子节点1', id: 2, pId: 1 },
    { label: '子节点2', id: 3, pId: 1 }
]

<Cascader
  data={flattenedData}
  dataStructureType='flattened'
  value={[2]}
  onChange={(value) => {
    console.log(value)
  }}
/>

API

Props