PHP+Element UI递归实现无限极树形菜单

bloger 2019-12-26 AM 3852℃ 0条

使用后台都会涉及到左侧的菜单分类;

刚好今天再使用Yaf + element 做一个通用后台,实现了一下无限极菜单;

下面具体讲一下实现方法:

分为几个步骤:

  • 获取所有菜单
  • 递归分级
  • 递归渲染菜单

首先我们来看一下element的菜单html结构

<el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>

效果为:
QQ截图20191226113415.jpg

数据表结构如下:
QQ截图20191226113629.jpg

读取后台所有菜单数据:

 //根据各自框架更改,获取所有的菜单数据
 $data = \Libs\Db\Pdo::getInstance()->fetchAll("SELECT * FROM `yaf_route`");

递归分组

public function  treeRoute(array $data,int $pid,int $deep=0) : array
    {
        $tree=[];
        foreach ($data as $row) {
            if($row['pid'] == $pid){
                $row['deep'] = $deep;
                $row['children'] = $this->treeRoute($data,$row['id'],$deep+1);
                $tree[] = $row;
            }
        }
        return $tree;
    }

返回数据结构如下:

[
    {
        "id": "1",
        "name": "系统设置",
        "pid": "0",
        "icon": "el-icon-setting",
        "sorts": "0",
        "route": "",
        "create_time": "2019-12-25 16:11:40",
        "deep": 0,
        "children": [
            {
                "id": "2",
                "name": "站点配置",
                "pid": "1",
                "icon": "",
                "sorts": "0",
                "route": "/config/index",
                "create_time": "2019-12-25 17:41:11",
                "deep": 1,
                "children": [
                    {
                        "id": "5",
                        "name": "支付配置",
                        "pid": "2",
                        "icon": "",
                        "sorts": "0",
                        "route": "/pay/index",
                        "create_time": "2019-12-26 11:04:55",
                        "deep": 2,
                        "children": []
                    }
                ]
            },
            {
                "id": "4",
                "name": "菜单设置",
                "pid": "1",
                "icon": "",
                "sorts": "0",
                "route": "/route/index",
                "create_time": "2019-12-25 18:06:17",
                "deep": 1,
                "children": []
            }
        ]
    }
]

根据前面Element菜单html递归菜单

private function treeAsideData(array $data)
    {
        $html = '';
        if(is_array($data)) {
            foreach ($data as $row) {
                if (empty($row['children'])) {
                    $html .= '<el-menu-item index="'.$row['id'].'"><template slot="title"><i class="'.$row['icon'].'"></i><span>'.$row['name'].'</span></template></el-menu-item>';
                } else {
                    $html .= '<el-submenu index="'.$row['id'].'"><template slot="title"><i class="'.$row['icon'].'"></i> <span>'.$row['name'].'</span></template>';
                    $html .= $this->treeAsideData($row['children']);
                    $html .= '</el-submenu>' ;
                }
            }
        }
       return $html;
    }

调用如下:

//根据各自框架更改,方法不变
$data = \Libs\Db\Pdo::getInstance()->fetchAll("SELECT * FROM `yaf_route`");
        $menus = RouteModel::getInstance()->treeRoute($data,0,0);
        $aside = $this->treeAsideData($menus);

结果如下:

QQ截图20191226114118.jpg

源代码请查看代码分享-> yafelement:

https://www.phpbloger.com/coding/

标签: element

非特殊说明,本博所有文章均为博主原创。

评论啦~