vue 左侧菜单栏固定不随右侧内容滚动而滚动

• 侧边栏子组件

 <div :class="collapsed?'menus w_64':'menus w_200'">
    <t-menu
      theme="light"
      :defaultValue="defaultValue"
      expandMutex
      :defaultExpanded="expanded"
      width="200px"
      :value="defaultActive"
      :collapsed="collapsed"
      @change="changeHandler"
    >
      <div v-for="menuItem in routesArr" :key="menuItem.path">
        <t-menu-item :value="menuItem.path" v-if="menuItem.meta.show != false">
          <template #icon>
            <icon name="user-circle" />
          </template>
          {{ getTitle(menuItem.meta.title) }}
        </t-menu-item>
      </div>
      <template #operations>
        <t-button variant="text" shape="square" @click.native="changeCollapsed">
          <t-button variant="text" shape="square">
            <view-list-icon slot="icon" />
          </t-button>
        </t-button>
      </template>
    </t-menu>
  </div>
   data() {
    return {
      collapsed: false,
    };
  },
   methods: {
   //菜单栏展开收缩绑定的方法
    changeCollapsed() {
      this.collapsed = !this.collapsed;
      this.$parent.getWidth(this.collapsed);//把是否展开收缩告诉父组件
    },
   }
   <style lang="scss" scoped>
   .menus {
      border-right: 0;
      box-shadow: 0px 10px 20px 0px rgba(0, 132, 244, 0.16);
      position: fixed;
      height: 100vh;
      overflow-y: hidden;
      overflow-x: hidden;
      z-index: 999;
    }
    .w_200{
    width: 200px;
    }
    .w_64{
    width: 64px;
    }
</style>

• 父组件

<template>
  <div id="app">
    <SideMenu ref="SideMenu"></SideMenu>
    <!-- 路由对应组件的显示 -->
    <div :class="isCollapsed?'maxt ml_64':'maxt ml_200'">//判断left的值
      <router-view> </router-view>
    </div>
  </div>
</template>
<script>
import SideMenu from "@/components/menu/SideMenu";
export default {
  components: {
    SideMenu,
  },
  data() {
    return {
      isCollapsed: false,
    };
  },
  methods: {
  //接收侧边栏状态
    getWidth(i) {
      this.isCollapsed = i;
    },
  },
};
</script>
<style lang="scss">
.maxt {
  width: 100%;
  overflow: hidden;
}
.ml_200 {
  margin-left: 200px;
}
.ml_64 {
  margin-left: 64px;
}
</style>