antd4 TreeSelect树选择关闭虚拟滚动

最新推荐文章于 2026-01-14 12:30:59 发布

原创最新推荐文章于 2026-01-14 12:30:59 发布 · 1.8k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

antd

当前文章被收录于：

antd

24 篇文章 2 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍如何在Ant Design的TreeSelect组件中禁用虚拟滚动功能，并提供了一个示例代码片段来展示如何设置dropdownMatchSelectWidth属性以加载所有数据。

TreeSelect的虚拟滚动属性是默认打开的，可视区加载10条数据。
如果你想关掉的话，可以设置dropdownMatchSelectWidth为false,就会加载所有的数据，不是动态加载。
代码如下：

import React, { useState } from 'react';
import { TreeSelect } from 'antd';

const { TreeNode } = TreeSelect;

const Demo = () => {
  const [value, setValue] = useState(undefined);
  const onChange = () => {
    setValue(value);
  };
  return (
    <TreeSelect
      dropdownMatchSelectWidth={false}//关闭虚拟滚动
      showSearch
      style={{ width: '100%' }}
      value={value}
      dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
      placeholder="Please select"
      allowClear
      treeDefaultExpandAll
      onChange={onChange}
    >
      <TreeNode value="parent 1" title="parent 1">
        <TreeNode value="parent 1-0" title="parent 1-0">
          <TreeNode value="leaf1" title="leaf1" />
          <TreeNode value="leaf2" title="leaf2" />
        </TreeNode>
        <TreeNode value="parent 1-1" title="parent 1-1">
          <TreeNode value="leaf3" title={<b style={{ color: '#08c' }}>leaf3</b>} />
        </TreeNode>
      </TreeNode>
    </TreeSelect>
  );
};

ReactDOM.render(<Demo />, mountNode);