el-aside中添加el-menu设置collapse宽度自适应

在Element UI中，el-aside是布局组件的侧边栏，而el-menu是导航菜单组件。若要设置el-menu在折叠状态下宽度自适应，可以通过监听el-menu的折叠事件来动态调整样式。

以下是一个简单的例子，展示如何实现这一功能：

<template>
  <el-aside width="auto">
    <el-menu
      :collapse="isCollapsed"
      @open="handleOpen"
      @close="handleClose"
    >
      <!-- 菜单项 -->
    </el-menu>
  </el-aside>
</template>
 
<script>
export default {
  data() {
    return {
      isCollapsed: false
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      this.adjustWidth();
    },
    handleClose(key, keyPath) {
      this.adjustWidth();
    },
    adjustWidth() {
      if (this.isCollapsed) {
        // 设置折叠状态下的宽度
        this.$nextTick(() => {
          const menu = this.$el.querySelector('.el-menu');
          menu.style.width = 'auto';
        });
      }
    }
  }
};
</script>

在这个例子中，el-menu的collapse属性用于控制菜单的折叠状态，handleOpen和handleClose方法用于处理菜单项的打开和关闭事件，在这些事件发生后调用adjustWidth方法来调整宽度。

请注意，这个例子中的.el-menu选择器假设你没有修改Element UI的默认类名。如果有必要，请根据实际情况调整选择器。