antd级联选择选择后怎么实现选择框里只显示最后一级

在Ant Design (antd) 的 Cascader（级联选择器）组件中，如果你想要在用户选择完所有级别后，只在下拉选项中展示最后一级的选项，可以采用以下步骤：

1. **监听onChange事件**：Cascader内置了onChange事件，当用户完成一次选择（包括最后一级）时会触发。

import { Cascader } from 'antd';

const cascader = React.useRef();
React.useEffect(() => {
  cascader.current.on('change', (selectedOptions) => {
    // 当选择完毕，更新组件状态只显示最后一级选项
    const lastLevelOptions = selectedOptions[selectedOptions.length - 1];
    if (lastLevelOptions && Array.isArray(lastLevelOptions)) {
      // 可能有多选，这里处理单选情况
      cascader.current.props.options = lastLevelOptions[0].options;
    }
  });
}, [cascader]);

2. **动态设置options**：在onChange事件回调中，你可以过滤掉前面级别的选项，只保留最后一级的选项作为`options`属性传递给Cascader。

3. **注意数据结构**：确保你的选项数据结构是树形的，每一级都有一个`options`字段，用于存储下一级的选项。

**示例代码**:

<Cascader
  ref={cascader}
  options={[
    {
      value: 'zhangsan',
      label: '张三',
      children: [
        {
          value: 'lisi',
          label: '李四'
        },
        {
          value: 'wangwu',
          label: '王五',
          options: [{ value: 'xiaoli', label: '小六' }]
        }
      ]
    }
  ]}
/>

在这个例子中，如果用户选择了"张三" -> "王五"，那么下拉列表将只显示"xiaoli"。