react基于@mui组件实现treeSelect多层级的树形下拉选择框

原创

已于 2023-11-29 18:45:13 修改 · 1.3k 阅读

标签

#react.js #前端 #typescript

收录于

于 2023-11-29 16:12:41 首次发布

本文介绍了在项目中因MUI库缺乏官方多层级选择框组件，作者通过嵌套select、treeview和treeitem组件实现了一种解决方案，包括数据定义、递归方法和自定义TreeView组件的处理方式。

因为目前在做的这个项目中，ui组件只能使用mui而出现的问题：现在mui没有官方定义好的关于多层级的选择框组件，因此进行了一些尝试。最终实现的样子长这样：

通过使用select和treeview、treeitem三种组件的嵌套实现了，多层级的下拉选择框。实现代码如下：

1.我们先定义一组假数据

let resData: Option[] = [
      {
        id: 'fruits',
        name: 'Fruits',
        children: [
          {
            id: 'apple',
            name: 'Apple',
            children: [
              { id: '111', name: '111' },
              { id: '222', name: '222' },
            ],
          },
          { id: 'orange', name: 'Orange' },
          { id: 'banana', name: 'Banana' },
        ],
      },
      {
        id: 'vegetables',
        name: 'Vegetables',
        children: [
          { id: 'carrot', name: 'Carrot' },
          { id: 'broccoli', name: 'Broccoli' },
        ],
      },
    ];