Material-UI select设置树结构 js
时间: 2024-01-13 20:02:33 浏览: 31
你可以使用 Material-UI 的 `Select` 和 `MenuItem` 组件来实现树形结构的选择器。具体实现步骤如下:
1. 定义树形数据结构,例如:
```
const treeData = [
{
id: 1,
label: 'Node 1',
children: [
{ id: 2, label: 'Child 1 of Node 1' },
{ id: 3, label: 'Child 2 of Node 1' },
],
},
{
id: 4,
label: 'Node 2',
children: [
{ id: 5, label: 'Child 1 of Node 2' },
{
id: 6,
label: 'Child 2 of Node 2',
children: [
{ id: 7, label: 'Child 1 of Child 2 of Node 2' },
{ id: 8, label: 'Child 2 of Child 2 of Node 2' },
],
},
],
},
];
```
2. 使用 `Select` 和 `MenuItem` 组件进行渲染,例如:
```
import React from 'react';
import { Select, MenuItem } from '@material-ui/core';
function renderTree(data) {
return data.map(node => (
<MenuItem key={node.id} value={node.id}>
{node.label}
{node.children && (
<Select>{renderTree(node.children)}</Select>
)}
</MenuItem>
));
}
function TreeSelect({ data, ...props }) {
return (
<Select {...props}>
{renderTree(data)}
</Select>
);
}
export default function App() {
return (
<div>
<TreeSelect
defaultValue={1}
displayEmpty
variant="outlined"
margin="normal"
fullWidth
data={treeData}
/>
</div>
);
}
```
上面的代码会渲染出一个树形结构的选择器,支持多级嵌套。注意,这里使用了递归的方式进行渲染,如果数据层级过深,可能会导致渲染性能问题。