?布局就是使用了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，没超出的时候也会有个占位槽在那，不美观。
