Elementui 折叠导航(展开收起变成icon图标)如何实现

在Element UI中，可以使用<el-menu>组件配合collapse属性和<i>标签来实现折叠导航菜单，以及展开收起时的图标切换。

以下是一个简单的例子：

<template>
  <el-container style="height: 500px; border: 1px solid #eee">
    <el-aside width="200px">
      <el-menu
        :collapse="isCollapse"
        unique-opened
        style="width: 200px;">
        <el-submenu index="1">
          <template slot="title">
            <i :class="isCollapse ? 'el-icon-menu' : 'el-icon-s-fold'"></i>
            <span>导航一</span>
          </template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-submenu>
        <!-- 更多菜单项 -->
      </el-menu>
    </el-aside>
    <el-main>
      <!-- 主要内容 -->
    </el-main>
  </el-container>
  <el-button @click="toggleMenu" style="margin-left: 20px;">切换导航</el-button>
</template>
 
<script>
export default {
  data() {
    return {
      isCollapse: false
    };
  },
  methods: {
    toggleMenu() {
      this.isCollapse = !this.isCollapse;
    }
  }
};
</script>

在这个例子中，<el-menu>的collapse属性绑定到了isCollapse数据属性上。当点击按钮时，toggleMenu方法会被调用，从而切换isCollapse的布尔值，实现导航的折叠和展开。

<i>标签内的class属性绑定到了当前的折叠状态isCollapse，根据折叠状态使用不同的图标。当isCollapse为true时，使用折叠图标el-icon-menu，否则使用展开图标el-icon-s-fold。