el-menu的collapse展开隐藏功能导致的视口宽度/高度异常问题

这个问题可能是由于在使用Element UI的<el-menu>组件的折叠模式（collapse）时，组件的结构发生了变化，导致页面布局受影响或者视口（viewport）的大小没有正确地调整。

解决方法通常包括以下几个步骤：

1. 确保Element UI的版本是最新的，或者至少是稳定版本，因为一些布局问题可能是由旧版本的bug引起的。
2. 检查CSS样式是否有覆盖<el-menu>的样式，可能是自定义的CSS导致样式不一致。
3. 确保在折叠和展开<el-menu>时，使用Element UI提供的方法来切换，并监听相关事件，在事件处理函数中做必要的DOM操作。
4. 如果问题依然存在，可以尝试在折叠和展开的回调函数中使用Vue的$nextTick方法，确保DOM已经更新完成后再进行后续操作。
5. 如果是视口高度异常，可以尝试在折叠和展开动画结束后，手动调整视口大小或者滚动条位置。

示例代码：

<template>
  <el-menu
    :collapse="isCollapsed"
    @open="handleOpen"
    @close="handleClose">
    <!-- 菜单项 -->
  </el-menu>
</template>
 
<script>
export default {
  data() {
    return {
      isCollapsed: false
    };
  },
  methods: {
    handleOpen() {
      // 展开时的处理
      this.$nextTick(() => {
        // 可能需要调整视口大小或者滚动条
      });
    },
    handleClose() {
      // 折叠时的处理
      this.$nextTick(() => {
        // 可能需要调整视口大小或者滚动条
      });
    }
  }
};
</script>

在handleOpen和handleClose方法中，使用this.$nextTick可以确保DOM已经更新完成后再执行后续操作。如果需要调整视口大小，可以使用JavaScript原生方法或者Element UI的ElMessage组件来给用户反馈。