element ui 实现顶部导航栏分左右布局

你可以使用 Element UI 中的 `el-menu` 组件实现顶部导航栏分左右布局，具体步骤如下：

1. 在 `el-menu` 上添加 `mode="horizontal"` 属性，使其呈水平布局。
2. 通过 `:default-active` 属性设置默认选中项。
3. 将左侧导航和右侧导航分别放置在 `el-menu-item-group` 中，并设置 `title` 属性来显示组名。
4. 通过 `slot="prepend"` 和 `slot="append"` 插槽在左侧导航和右侧导航前后添加额外的内容。

以下是示例代码：

<template>
  <el-menu mode="horizontal" :default-active="activeIndex">
    <el-menu-item-group title="左侧导航" class="left-nav">
      <el-menu-item index="1">菜单1</el-menu-item>
      <el-menu-item index="2">菜单2</el-menu-item>
      <el-menu-item index="3">菜单3</el-menu-item>
    </el-menu-item-group>
    <el-menu-item-group title="右侧导航" class="right-nav">
      <el-menu-item index="4">菜单4</el-menu-item>
      <el-menu-item index="5">菜单5</el-menu-item>
      <el-menu-item index="6">菜单6</el-menu-item>
    </el-menu-item-group>
    <template slot="prepend">
      <i class="el-icon-menu"></i>
    </template>
    <template slot="append">
      <el-button type="primary">添加新菜单</el-button>
    </template>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
    };
  },
};
</script>

<style>
.left-nav {
  float: left;
}
.right-nav {
  float: right;
}
</style>

通过上述代码，你可以实现一个简单的顶部导航栏，左侧导航和右侧导航分别呈现在页面的左右两侧。你可以根据需求自定义导航栏的样式和交互。