element ui页面 ui li

Element UI是基于Vue.js的桌面端组件库，它提供了一系列的UI组件来帮助开发者快速构建高质量的网页界面。其中，`<el-menu>` 是Element UI中的菜单组件，用于创建导航菜单，而`<el-menu-item>` 是菜单中的单个列表项。

`<el-menu>` 组件可以设置为横向或纵向布局，并且可以通过 `default-active` 属性来指定默认激活的菜单项。`<el-menu-item>` 则通常包含一个 `index` 属性和一个标签内容，`index` 用于标识菜单项，通常是一个唯一的字符串。

Element UI的菜单组件具备如下特性：

1. 支持子菜单：`<el-menu>` 可以包含多个 `<el-menu-item>`，并且 `<el-menu-item>` 可以包含嵌套的 `<el-submenu>` 来创建多级菜单。
2. 支持自动选中：通过 `default-index` 属性，可以指定默认选中的菜单项。
3. 支持动态添加、删除和排序：可以使用JavaScript动态地控制菜单项。
4. 支持自定义图标：通过 `slot` 属性可以插入自定义图标。

以下是一个简单的Element UI菜单组件的示例代码：

<template>
  <el-menu :default-active="activeMenu" mode="horizontal">
    <el-menu-item index="1">
      <i class="el-icon-location"></i>
      <span slot="title">导航一</span>
    </el-menu-item>
    <el-menu-item index="2">
      <i class="el-icon-menu"></i>
      <span slot="title">导航二</span>
    </el-menu-item>
    <el-submenu index="3">
      <template slot="title">
        <i class="el-icon-document"></i>
        <span>导航三</span>
      </template>
      <el-menu-item index="3-1">选项一</el-menu-item>
      <el-menu-item index="3-2">选项二</el-menu-item>
      <el-menu-item index="3-3">选项三</el-menu-item>
    </el-submenu>
  </el-menu>
</template>