管理后台布局-左菜单-右侧内容宽度控制（使用ant design vue)

项目结构如下：

 布局实现的代码段

<template>
  <a-layout>
    <a-layout-sider
      v-model="collapsed"
      :trigger="null"
      collapsible
      class="app-sider"
    >
      <div class="logo-box"></div>
      <SideMenu :openCurrent="openCurrent" @clearPath="clearPath"></SideMenu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="app-header" v-if="!showScreen">
        <span class="app-header-trigger">
          <a-icon
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="() => (collapsed = !collapsed)"
          />
        </span>
        <div class="app-header-right">
          <a-menu mode="horizontal" @click="handleClick">
            <a-menu-item key="/alarm/deviation" v-if="showModel[0]">
              <a-badge :count="count"><a-icon type="bell" /></a-badge>
            </a-menu-item>
            <a-sub-menu>
              <span class="app-user-avatar" slot="title">
                <a-avatar
                  size="small"
                  src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png"
                />
                {{ User ? User.username : "" }}
              </span>
              <a-menu-item key="/setting/profile" v-if="showModel[1]"
                ><a-icon type="user" key="user" />个人资料
              </a-menu-item>
              <a-menu-item key="/setting/password" v-if="showModel[2]"
                ><a-icon type="lock" key="password" />修改密码
              </a-menu-item>
              <a-menu-item key="/login"
                ><a-icon type="poweroff" />退出登录
              </a-menu-item>
            </a-sub-menu>
            <!-- <a-menu-item key="/help">
              <a-icon type="question-circle"
            /></a-menu-item> -->
          </a-menu>
        </div>
      </a-layout-header>
      <a-layout-content class="set-right-content">
        <template>
          <header-page v-if="haveHeader" :menuList="menuList"></header-page>
          <router-view />
        </template>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

 主要说一下左边菜单右边内容的设置问题，虽然用到了布局标签，原理也就是使用了弹性盒子，单是还是需要对右边内容宽度做一个定义增加  :style="'width:' + (fullWidth - 200) + 'px'" 防止使用table内容过长时侯出现表格横向过长的问题，进而影响到页面布局情况。导致一下结果，看下图：

<a-layout :style="'width:' + (fullWidth - 200) + 'px'">
      <a-layout-header class="app-header" v-if="!showScreen">
        <span class="app-header-trigger">
          <a-icon
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="() => (collapsed = !collapsed)"
          />
        </span>
        <div class="app-header-right">
          <a-menu mode="horizontal" @click="handleClick">
            <a-menu-item key="/alarm/deviation" v-if="showModel[0]">
              <a-badge :count="count"><a-icon type="bell" /></a-badge>
            </a-menu-item>
            <a-sub-menu>
              <span class="app-user-avatar" slot="title">
                <a-avatar
                  size="small"
                  src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png"
                />
                {{ User ? User.username : "" }}
              </span>
              <a-menu-item key="/setting/profile" v-if="showModel[1]"
                ><a-icon type="user" key="user" />个人资料
              </a-menu-item>
              <a-menu-item key="/setting/password" v-if="showModel[2]"
                ><a-icon type="lock" key="password" />修改密码
              </a-menu-item>
              <a-menu-item key="/login"
                ><a-icon type="poweroff" />退出登录
              </a-menu-item>
            </a-sub-menu>
            <!-- <a-menu-item key="/help">
              <a-icon type="question-circle"
            /></a-menu-item> -->
          </a-menu>
        </div>
      </a-layout-header>
      <a-layout-content class="set-right-content">
        <template>
          <header-page v-if="haveHeader" :menuList="menuList"></header-page>
          <router-view />
        </template>
      </a-layout-content>
    </a-layout>

 最右侧表格过长撑开了父级，导致三级菜单的比例不变但由于父级变宽，他也变宽了。解决办法就是遏制住这里的父级的宽度，就是以上提到的增加style方法。