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);