vue3+element侧边栏导航循环遍历icon

在Vue3中使用Element UI实现侧边栏导航循环遍历icon的实现方法与上面所示的基本类似，只是需要使用Element UI提供的icon组件。以下是一个示例代码：

<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect">
      <el-menu-item v-for="(item, index) in navItems" :key="index" :index="index">
        <i :class="item.icon"></i>
        <span slot="title">{{ item.title }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "0", // 默认选中项的索引
      navItems: [
        {
          title: "Home",
          link: "/",
          icon: "el-icon-s-home" // Element UI提供的icon类名
        },
        {
          title: "About",
          link: "/about",
          icon: "el-icon-info"
        },
        {
          title: "Contact",
          link: "/contact",
          icon: "el-icon-message"
        },
        // 循环遍历的数据可以自行添加或从后端API获取
      ]
    };
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index;
    }
  }
};
</script>

在上面的代码中，`navItems`数组中存储了侧边栏导航的数据，包括每个导航项的标题、链接和图标类名。使用`v-for`指令在模板中循环遍历这些导航项，并将每个图标的类名绑定到`<i>`元素的`class`属性上，以显示相应的图标。同时，使用Element UI提供的`el-menu`和`el-menu-item`组件实现了导航菜单的基本结构，并使用`default-active`属性指定默认选中项的索引。在`handleSelect`方法中，我们可以监听导航菜单的`select`事件，更新选中项的索引并执行相应的操作。