Cascader 级联

使用场景

在一组相关联的数据集合进行选择，例如省市区、组织架构树、商品分类等。

Cascader 一般会以选择器的形式进行使用，此时我们推荐使用 CascaderSelect 组件。

note

因为 Cascader/CascaderSelect 在某一个层级一次只能打开一个列表，Cascader/CascaderSelect 被设计为 仅支持同一个分组下 叶子节点的单选或多选。

跨父节点，跨层级，父节点可被选中，或是其他通用的选择场景请使用 Tree 或 TreeSelect 组件。

示例

基本示例

Option 1

Option 2

动物园

阿里动物园

2号动物园

inline

// 以下变量从其他模块中引入： // bigTreeDataSource function Basic() { return <Cascader style={{ border: '1px solid var(--rex-colors-emphasis-20)' }} dataSource={bigTreeDataSource} />; }

// 以下变量从其他模块中引入：
//  bigTreeDataSource

function Basic() {
  return <Cascader style={{ border: '1px solid var(--rex-colors-emphasis-20)' }} dataSource={bigTreeDataSource} />;
}

受控多选

(受控多选) 当前 selectedKeys: 1

Option 1

Option 2

动物园

阿里动物园

2号动物园

inline

// 以下变量从其他模块中引入： // bigTreeDataSource function Multiple() { const [selectedKeys, onSelect] = useState(['1']); return ( <div> <div> (受控多选) 当前 selectedKeys: <code>{selectedKeys.join(',')}</code> </div> <Cascader style={{ border: '1px solid var(--rex-colors-emphasis-20)' }} selectedKeys={selectedKeys} onSelect={onSelect} dataSource={bigTreeDataSource} /> </div> ); }

// 以下变量从其他模块中引入：
//  bigTreeDataSource

function Multiple() {
  const [selectedKeys, onSelect] = useState(['1']);
  return (
    <div>
      <div>
        (受控多选) 当前 selectedKeys: <code>{selectedKeys.join(',')}</code>
      </div>
      <Cascader
        style={{ border: '1px solid var(--rex-colors-emphasis-20)' }}
        selectedKeys={selectedKeys}
        onSelect={onSelect}
        dataSource={bigTreeDataSource}
      />
    </div>
  );
}

受控单选

Cascader 组件本身仅支持 selectedKeys 的数组用法。 单选功能需要在上层进行数据处理。

(受控单选) 当前 selectedKey: 4204

noInline

function useDistrictsTreeData() { const [data, setData] = useState([]); useEffect(() => { fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json') .then((response) => response.json()) .then((data) => { data[1].disabled = true; setData(data); }) .catch((e) => console.log(e)); }, []); return data; } function getLast(value) { return value.length === 0 ? null : value[value.length - 1]; } function Controlled() { const dataSource = useDistrictsTreeData(); const [selectedKey, setSelectedKey] = useState('4204'); return ( <div> <div>(受控单选) 当前 selectedKey: {selectedKey}</div> <Cascader // dataSource 加载完成时，重新加载 cascader key={dataSource.length} style={{ border: '1px solid var(--rex-colors-emphasis-20)' }} selectedKeys={[selectedKey]} onSelect={(keys) => setSelectedKey(getLast(keys))} dataSource={dataSource} /> </div> ); } render(<Controlled />)

function useDistrictsTreeData() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')
      .then((response) => response.json())
      .then((data) => {
        data[1].disabled = true;
        setData(data);
      })
      .catch((e) => console.log(e));
  }, []);

  return data;
}

function getLast(value) {
  return value.length === 0 ? null : value[value.length - 1];
}

function Controlled() {
  const dataSource = useDistrictsTreeData();

  const [selectedKey, setSelectedKey] = useState('4204');

  return (
    <div>
      <div>(受控单选) 当前 selectedKey: {selectedKey}</div>
      <Cascader
        // dataSource 加载完成时，重新加载 cascader
        key={dataSource.length}
        style={{ border: '1px solid var(--rex-colors-emphasis-20)' }}
        selectedKeys={[selectedKey]}
        onSelect={(keys) => setSelectedKey(getLast(keys))}
        dataSource={dataSource}
      />
    </div>
  );
}

render(<Controlled />)

可选择的最大深度

默认情况下，dataSource 中的叶子节点才可以被选中。设置 maxDepth 可以指定某个深度的节点均为子节点。

最大深度：

0

1

2

noInline

function useDistrictsTreeData() { const [data, setData] = useState([]); useEffect(() => { fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json') .then((response) => response.json()) .then((data) => { data[1].disabled = true; setData(data); }) .catch((e) => console.log(e)); }, []); return data; } function MaxDepth() { const dataSource = useDistrictsTreeData(); const [maxDepth, setMaxDepth] = useState(2); return ( <div> <div style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}> 最大深度： <RadioGroup value={String(maxDepth)} onChange={(d) => setMaxDepth(Number(d))} dataSource={[0, 1, 2].map((d) => ({ value: String(d), label: String(d) }))} /> </div> <Cascader // dataSource 加载完成时，重新加载 cascader key={dataSource.length} style={{ border: '1px solid var(--rex-colors-emphasis-20)' }} dataSource={dataSource} maxDepth={maxDepth} defaultSelectedKeys={['4204']} /> </div> ); } render(<MaxDepth />)

function useDistrictsTreeData() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')
      .then((response) => response.json())
      .then((data) => {
        data[1].disabled = true;
        setData(data);
      })
      .catch((e) => console.log(e));
  }, []);

  return data;
}

function MaxDepth() {
  const dataSource = useDistrictsTreeData();

  const [maxDepth, setMaxDepth] = useState(2);

  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
        最大深度：
        <RadioGroup
          value={String(maxDepth)}
          onChange={(d) => setMaxDepth(Number(d))}
          dataSource={[0, 1, 2].map((d) => ({ value: String(d), label: String(d) }))}
        />
      </div>

      <Cascader
        // dataSource 加载完成时，重新加载 cascader
        key={dataSource.length}
        style={{ border: '1px solid var(--rex-colors-emphasis-20)' }}
        dataSource={dataSource}
        maxDepth={maxDepth}
        defaultSelectedKeys={['4204']}
      />
    </div>
  );
}

render(<MaxDepth />)

API

字段	描述
style	CSSProperties
className	string
dataSource*	CascaderItem[]
selectedKeys	string[] 选中的值，受控用法
defaultSelectedKeys	string[] 默认选中的值，非受控用法
onSelect	(nextSelectedKeys: string[], detail: any) => void 选中值改变的回调
maxDepth	number = Infinity 指定可选择的节点的最大深度
defaultExpandedKeys	string[] 默认展开的节点
expandedKeys	string[] 展开节点
onExpand	Dispatch<SetStateAction<string[]>> 节点展开的回调函数