最近做一个小项目，中间有一个需求是，把后台返回的树形数据生成为导航栏格式，怪我愚笨，搜了好多也没看懂。于是自己写了一个，以备以后用到。
首先，后台返回的树形数据为较为简单的二层结构。名为 data
data：[{id: "3e7e4c97720d4f01af5131faf4f1848d",label: "一号楼",children: [{id: "3e7e4c97720d4f01af5131faf4f1848d",label: "101"},{id: "92f43db6de53436ca34fc601a1493c4e",label: "102"}]},{id: "bcb789cbfb4e4a5abdc51ea0ab61b970",label: "二号楼",children: [{id: "bcb789cbfb4e4a5abdc51ea0ab61b970",label: "101"}]}]
生成导航栏的代码为
<el-menudefault-active="2"@open="handleOpen"@close="handleClose"@select="selectnode"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><template v-for="menu in data"><el-submenu :index="menu.id" :key="menu.id"><template slot="title"><i class="el-icon-location"></i><span>{{menu.label}}</span></template ><template v-for="node in menu.children"><el-menu-item :index="node.id" :key="node.id">{{node.label}}</el-menu-item></template></el-submenu></template></el-menu>
最终生成的导航栏如下：
