有关vue项目布局，如何实现左右内容各自滚动自己的，table为空时候撑满高度

 布局就是使用了ant design vue里面常用的布局ant design vue布局，

1.想要实现左右侧各自滚动自己的，首先就应该让最大的盒子#app的overflow为hidden，这一步是防止页面内容超出后，浏览器页先出现了滚动条。

 再给左侧的菜单设置单独滚动

 

 菜单的设置很简单。主要难点在右侧，内容上。

2.在右侧内容的包裹布局上利用监测浏览器窗口变化，来影响内容区域的宽窄变化。（我有尝试过不监听，但是页面总是，扩大页面宽度时候，内容随之撑开，但是缩小的时候没有任何反应）。到底在那个盒子上加滚动才能实现呢。

 红色的部分可以理解成，已经完全通过监听浏览器窗口大小来计算出内容宽度了。等同于他现在就是浏览器窗口了。啥时候在这个框出现滚动条呢，当绿色盒子内的代码，不在随着屏幕缩小而改变了。红色盒子就会出现滚动条。所以要给小绿添加最小值。

.set-main-content {
  min-width: 920px;
  height: 100vh;
}

 到这布局的问题已经解决了，代码分享一下：

布局代码：

<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
      :style="'width:' + (fullWidth - 200) + 'px'"
      class="right-content-box"
    >
      <div class="set-main-content">
        <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>
      </div>
    </a-layout>
  </a-layout>
</template>

<script>
import store from "@/store";
import { mapGetters } from "vuex";
import SideMenu from "../components/SideMenu";
export default {
  name: "Home",
  components: {
    SideMenu,
    HeaderPage,
  },
  data() {
    return {
      fullWidth: document.documentElement.clientWidth,
    };
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        window.fullWidth = document.documentElement.clientWidth;
        that.fullWidth = window.fullWidth;
      })();
    };
  },
</script>
<style scoped lang="less">
/deep/ .ant-layout {
  overflow: hidden;
}
/deep/ .container-tree {
  flex: 1;
  height: 100% !important;
}
.right-content-box {
  overflow-x: auto !important;
}
.set-main-content {
  min-width: 920px;
  height: 100vh;
}
</style>

左侧菜单的代码

<template>
  <a-menu
    theme="dark"
    mode="inline"
    :defaultSelectedKeys="[current]"
    :selectedKeys="[current]"
    @click="handleClick"
    @openChange="onOpenChange"
    :open-keys="openKeys"
    class="app-sider-menu"
  >
    <template v-for="item in this.routes[0].children">
      <a-sub-menu
        :key="item.path"
        v-if="item.visiable == 1 && item.children.length > 0"
      >
        <span slot="title">
          <icon-font
            :type="item.icon"
            v-if="item.icon && item.icon.indexOf('icon-') == 0"
          />
          <a-icon
            :type="item.icon"
            v-if="item.icon && item.icon.indexOf('icon-') == -1"
          />
          <span>{{ item.name }}</span>
        </span>
        <template v-for="menu in item.children">
          <a-menu-item :key="menu.path" v-if="menu.visiable == 1">{{
            menu.name
          }}</a-menu-item>
        </template>
      </a-sub-menu>
      <a-menu-item :key="item.path" v-else-if="item.visiable == 1">
        <icon-font
          :type="item.icon"
          v-if="item.icon && item.icon.indexOf('icon-') == 0"
        />
        <a-icon
          :type="item.icon"
          v-if="item.icon && item.icon.indexOf('icon-') == -1"
        />
        <span>{{ item.name }}</span>
      </a-menu-item>
    </template>
  </a-menu>
</template>

<script>
export default {
  name: "SideMenu",
  props: {
    openCurrent: {
      type: String,
    },
  },
  data() {
    return {
      current: this.$route.path,
      openKeys: ["/"],
      rootSubmenuKeys: [],
      flag: false,
    };
  },
  watch: {
    openCurrent: function (val, oldVal) {
      // 如果openCurrent改变就让他跳转
      this.flag = true;
      if (val.indexOf("alarm") > -1) {
        this.current = this.openCurrent;
        this.openKeys = ["/", "/alarms"];
        // 路由跳转
        this.$router.push(this.openCurrent);
      } else if (val.indexOf("setting") > -1) {
        this.current = this.openCurrent;
        this.openKeys = ["/", "/setting"];
        // 路由跳转
        this.$router.push(this.openCurrent);
      }
    },
  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    routes() {
      return [...this.$store.getters.routes];
    },
  },
  created() {
    this.setRootKey();
    // 从告警提示按钮跳转偏差告警页面
  },
  methods: {
    setRootKey() {
      // 获得新菜单
      var routes = this.$store.getters.routes;
      routes[0].children.forEach((element) => {
        this.rootSubmenuKeys.push(element.path);
      });
    },
    onOpenChange(openKeys) {
      // 最新的key值
      const latestOpenKey = openKeys.find(
        (key) => this.openKeys.indexOf(key) === -1
      );
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
    handleClick(e) {
      this.current = e.key;
      if (this.flag) {
        this.flag = false;
        this.$emit("clearPath");
      }
      if (e.key == "logout") {
        this.logout();
      } else {
        //如果key为路由则跳转
        if (e.key.indexOf("/") > -1) {
          this.$router.push(e.key);
        }
      }
    },
  },
  components: {},
};
</script>

<style lang="less" scoped>
.app-sider-menu {
  height: calc(100vh - 80px);
  overflow-x: hidden;
  overflow-y: auto;
}
.app-sider-menu::-webkit-scrollbar {
  display: none;
}
</style>

让table空的时候撑满高度

<a-table
      :rowKey="(record) => record.id"
      :columns="columns"
      :dataSource="tableData"
      :pagination="false"
      :loading="loading"
      bordered
      @change="onPageChanged"
      size="middle"
      :scroll="{ x: 'max-content' }"
      :class="tableData.length > 0 ? '' : 'when-empty-table'"
    >

就是价格判断如果当前没有数据，引入样式，这个给的高度是要自己算一下的。减去这个表格上面有的东西。

 .when-empty-table {
    .ant-table-placeholder {
      height: calc(100vh - 346px);
      min-height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
     .ant-table-body {
      overflow-x: hidden !important;
    }
  }

最后分享一个小技巧，当拖动浏览器窗口缩着缩着，表格内容换行了，但是你不想让他换行，就可以下面这样不让他换行。然后捏

/deep/ .ant-table-body th,
/deep/ .ant-table-body td {
  text-align: center;
  white-space: nowrap;
}

 给表格添加一个横向滚动，重点是需要再加上一行

/deep/ .ant-table-body {
  overflow-x: auto !important;
}

上面这段css就是可以更好的替代ant design vue里面:scroll="{ x: 'max-content' }"，因为这个scroll写法就相当于overflow-x：scroll，没超出的时候也会有个占位槽在那，不美观。