vite+vue+ts+element-plus从零开发管理后台框架(07)-主页内容布局

测试

编辑src/views/Home.vue，使内容超过布局。

<template>
    <p v-for="item in 50">首页{{ item }}</p>
</template>

浏览器查看，当内容超过布局时有两个问题。一是滚动时会带动顶部和侧边栏滚动，二是滚动条太丑了。

固定顶部和侧边栏

编辑src/views/Main.vue，添加el-main样式，这里的60px是顶部的高度。

.el-main {
    height: calc(100vh - 60px);
    padding: 12px;
    text-align: left;
}

优化滚动条

编辑src/views/Main.vue，el-main修改如下。

<el-main>
    <el-scrollbar>
        <router-view />
    </el-scrollbar>
</el-main>