vue左侧二级导航栏用什么组件 • Worktile社区

不及物动词

这个人很懒，什么都没有留下～

在Vue中，可以使用Element-UI组件库的Menu组件来实现左侧二级导航栏。

Element-UI是一套基于Vue.js的桌面端组件库，提供了丰富的组件和工具，能够帮助开发者快速搭建用户界面。

使用Element-UI的Menu组件可以很方便地实现左侧导航栏的布局和功能。具体步骤如下：

首先，需要安装Element-UI组件库。可以使用npm或yarn来安装：
```
npm install element-ui
# 或者
yarn add element-ui
```

在项目的入口文件（一般是main.js）中引入Element-UI的样式和组件：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

在需要使用左侧二级导航栏的组件中，使用Menu组件进行布局：

<template>
  <div>
    <el-menu default-active="1" class="el-menu-vertical-demo">
      <el-submenu index="1">
        <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 index="1-3">选项3</el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">导航二</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

在上述示例中，el-menu表示菜单容器，el-submenu表示一级菜单，el-menu-item表示二级菜单项。

注意：菜单项的index属性用来表示菜单项的标识，用于控制菜单的选中状态。

如果需要在导航栏中添加图标，可以使用el-icon组件：

<template>
  <div>
    <el-menu default-active="1" class="el-menu-vertical-demo">
      <el-submenu index="1">
        <template slot="title">
          <el-icon name="el-icon-location"></el-icon>导航一
        </template>
        <el-menu-item index="1-1">选项1</el-menu-item>
        <el-menu-item index="1-2">选项2</el-menu-item>
        <el-menu-item index="1-3">选项3</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

在上述示例中，使用el-icon组件设置了一个名为"el-icon-location"的图标。

通过以上步骤，就可以使用Element-UI的Menu组件来实现Vue项目中的左侧二级导航栏。

2年前 0条评论

worktile

Worktile官方账号

在Vue中，可以使用router-link和router-view组件来实现左侧二级导航栏。

router-link组件：router-link是Vue Router提供的用来生成导航链接的组件。它可以被用来创建一个URL，当用户点击链接时，会触发路由的切换。在左侧二级导航栏中，可以使用router-link来创建每个导航的链接。
router-view组件：router-view也是Vue Router提供的一个组件，用于渲染匹配到的路由组件。当用户点击左侧导航栏的链接时，通过router-view组件来渲染对应的路由组件。
使用vue-router来配置路由：在Vue项目中，需要先安装vue-router，并在主文件中进行配置。通过配置路由表，可以指定每个导航链接对应的组件。
动态生成导航栏：左侧二级导航栏一般是动态生成的，通过遍历导航数据，可以使用v-for指令来进行遍历，然后将每一个导航项使用router-link组件进行链接生成。
设置选中状态：在Vue中，可以通过给router-link添加active-class属性来设置选中状态样式，可以通过给对应导航链接添加active样式类来实现导航项选中时的样式效果。

综上所述，通过使用router-link和router-view组件配合vue-router的配置，我们可以很方便地实现Vue左侧二级导航栏。

2年前 0条评论

fiy

Worktile&PingCode市场小伙伴

在Vue中，可以使用Element UI库中的Menu组件来实现左侧二级导航栏。Element UI是一套基于Vue.js的桌面端组件库，提供了丰富的UI组件，包括导航菜单、按钮、表格等。

下面是使用Element UI库的Menu组件实现左侧二级导航栏的操作流程：

安装Element UI库
首先，需要通过npm或者yarn安装Element UI库。在终端中执行以下命令：
```
npm install element-ui
```
安装完成后，在项目的主入口文件（一般是main.js）中引入Element UI库：
```
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
```
这样就可以在Vue项目中使用Element UI的组件了。

创建左侧导航菜单组件
在Vue项目中创建一个名为SideMenu的组件，用于显示左侧导航菜单。在该组件的模板中，使用Element UI的Menu组件来实现导航菜单的显示和二级菜单的展开。

<template>
  <el-menu :default-active="defaultActive" mode="vertical" unique-opened>
    <el-submenu v-for="menu in menus" :key="menu.id" :index="menu.id.toString()">
      <template slot="title">
        <i :class="menu.icon"></i>
        <span>{{ menu.name }}</span>
      </template>
      <el-menu-item v-for="subMenu in menu.children" :key="subMenu.id" :index="subMenu.id.toString()">
        <span slot="title">{{ subMenu.name }}</span>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      defaultActive: '1', // 默认激活的菜单项
      menus: [ // 菜单数据
        {
          id: 1,
          name: '菜单1',
          icon: 'el-icon-menu',
          children: [
            { id: 11, name: '子菜单1' },
            { id: 12, name: '子菜单2' },
          ]
        },
        {
          id: 2,
          name: '菜单2',
          icon: 'el-icon-menu',
          children: [
            { id: 21, name: '子菜单3' },
            { id: 22, name: '子菜单4' },
          ]
        },
      ],
    };
  },
};
</script>

<style scoped>
</style>

在上面的代码中，el-menu组件的default-active属性用于设置默认激活的菜单项，mode属性用于设置菜单的显示模式，unique-opened属性用于设置只展开一个二级菜单。

使用v-for指令遍历menus数组，使用el-submenu组件展示一级菜单，使用el-menu-item组件展示二级菜单。

在其他组件中使用左侧导航菜单
在需要显示左侧导航菜单的组件中，引入并使用SideMenu组件即可。
```
<template>
  <div>
    <SideMenu></SideMenu>
    
  </div>
</template>

<script>
import SideMenu from '@/components/SideMenu';

export default {
  components: {
    SideMenu,
  },
};
</script>

<style scoped>
</style>
```
在上面的代码中，通过引入SideMenu组件，并在模板中使用的方式来显示左侧导航菜单。

通过以上步骤，就可以在Vue项目中使用Element UI的Menu组件实现左侧二级导航栏了。

2年前 0条评论