快捷導(dǎo)航

Vue+ElementUI容器無法鋪滿網(wǎng)頁的問題解決

更新時間：2024年08月28日 09:37:24 作者：453251

這篇文章主要介紹了Vue+ElementUI容器無法鋪滿網(wǎng)頁的問題解決,文章通過圖文結(jié)合的方式給大家講解的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

首先是解決html，body鋪不滿屏幕的問題，就是對于撐開的html，body沒有覆蓋掉，可以通過在assets下新建一個global.scss文件

設(shè)置html，body的寬度為100vw，高度為100vh，代碼如下：

html,
body,
#app{
  height: 100vh;
  margin: 0;
  padding: 0;
  width:100vw;
}

然后在App.vue中引入該文件，

代碼如下：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
 
<script>
import "./assets/global.scss"
export default {
  name: 'App'
}
</script>
 
<style scoped>
 
</style>

這樣子可以使得html，body能夠鋪滿整個頁面，此時還需要讓el-container容器也鋪滿整個頁面，在對應(yīng)的vue文件中加入如下代碼：

.el-container {
    padding: 0;
    margin: 0;
    height: 100vh;
    width:100vw;
}

我是做了一個SPA單頁Web應(yīng)用，所以在顯示的Index.vue中加入代碼：

這樣子就可以使得頁面鋪滿整個網(wǎng)頁，效果如下：

然而，在加入菜單，表格等內(nèi)容后，只做這樣的修飾是不夠的，因為我的表格等元素也用了一個el-container容器包裹，所以這部分表格所占的視圖也被自動設(shè)置為100vh和100vw，這樣子就導(dǎo)致了實際寬高超出了瀏覽器網(wǎng)頁的范圍，導(dǎo)致了滾動條的出現(xiàn)，如下圖所示，

所以，要想呈現(xiàn)完美的效果，還需要附加上一些對元素的CSS修飾，這個就需要根據(jù)項目來看了，下面是我項目中Index.vue的代碼：

<script setup lang="ts">
import { reactive } from 'vue';
import Employee from "./Employee.vue";
import Department from './Department.vue';
import SysUser from './SysUser.vue';
import SysRole from './SysRole.vue';
import SysPermission from './SysPermission.vue';
import { OfficeBuilding } from '@element-plus/icons-vue';
 
const datas = reactive({
    // selectedTab存儲當前顯示對象的鍵
    selectedTab:null,
    // tabs數(shù)組存儲對象的鍵
    tabs:[],
    // modules類似于一個Map，里面存儲了許多對象
    // title對應(yīng)tab的標簽，name對應(yīng)tab的鍵，component對應(yīng)tab顯示的內(nèi)容
    modules:{
        employee:{
            title:"員工管理",
            name:"employee",
            component:Employee
        },
        department:{
            title:"部門管理",
            name:"department",
            component:Department
        },
        sysUser:{
            title:"用戶管理",
            name:"sysUser",
            component:SysUser
        },
        sysRole:{
            title:"角色管理",
            name:"sysRole",
            component:SysRole
        },
        sysPermission:{
            title:"權(quán)限管理",
            name:"sysPermission",
            component:SysPermission
        }
    }
});
 
const selectMenu = (index) => {
    if(datas.tabs.indexOf(index) < 0){
        // 當點擊標簽時，如果數(shù)據(jù)中沒有該標簽頁的索引，則將其添加到tabs中并顯示該標簽頁
        datas.tabs.push(index);
    }
    datas.selectedTab = index;
};
 
const removeTab = (name) => {
    let index = datas.tabs.indexOf(name);
    // 刪除對應(yīng)索引的一條數(shù)據(jù)
    datas.tabs.splice(index, 1);
    // 顯示所有標簽頁中的第一個
    datas.selectedTab = datas.tabs[0];
}
 
</script>
 
<template>
    <el-container>
        <el-header style="height:120px">
            <div id="top">
                <div id="logo">Alan人事管理系統(tǒng)</div>
            </div>
        </el-header>
 
        <el-container>
            <el-aside width="200px">
                <el-menu  background-color="#545c64" text-color="#fff"
                active-text-color="#ffd04b" @select="selectMenu">
                    <el-menu-item>
                        <el-icon><Ship/></el-icon>
                        <span>歡迎頁面</span>
                    </el-menu-item>
                    
                    <!--@select事件會自動傳遞菜單標簽中的index屬性值-->
                    <!--這里設(shè)置index屬性是modules對象中的屬性名稱，這樣用戶點擊菜單就會傳遞對象的鍵給函數(shù)-->
                    <el-menu-item index="employee">
                        <el-icon><Star/></el-icon>
                        <span>員工管理</span>
                    </el-menu-item>
 
                    <el-menu-item index="department">
                        <el-icon><OfficeBuilding/></el-icon>
                        <span>部門管理</span>
                    </el-menu-item>
 
                    <el-sub-menu index="permission_management">
                        <template #title>
                            <el-icon><Setting/></el-icon>
                            <span>權(quán)限管理</span>
                        </template>
 
                        <el-menu-item-group>
                            <el-menu-item index="sysUser"><el-icon><User/></el-icon>用戶管理</el-menu-item>
                            <el-menu-item index="sysRole"><el-icon><EditPen/></el-icon>角色管理</el-menu-item>
                            <el-menu-item index="sysPermission"><el-icon><Bell/></el-icon>權(quán)限管理</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                </el-menu>
            </el-aside>
 
            <el-main>
                <!--將modules（類似于對象Map）的key設(shè)置為對象的name-->
                <el-tabs v-model="datas.selectedTab" type="border-card" closable @tab-remove="removeTab">
                    <el-tab-pane :key="datas.modules[key].name" v-for="key in datas.tabs" 
                    :label="datas.modules[key].title" :name="datas.modules[key].name">
                        <component :is="datas.modules[key].component"></component>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
 
        <el-footer style="height:120px"></el-footer>
    </el-container>
</template>
 
<style scoped>
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
}
 
/*由于我設(shè)置了頁頭和頁尾，各有120px，所以el-aside和el-main中的高度要做出相應(yīng)計算 */
.el-aside {
  color: #333;
  text-align: center;
  height: calc(100vh - 240px) !important;
  background-color: #545c64;
}
 
/*菜單的寬度為200px，所以main中的寬度也要做相應(yīng)計算 */
.el-main {
  background-color: #fff;
  color: #333;
  text-align: center;
  padding: 0;
  height:calc(100vh - 240px) !important;
  width:calc(100vw - 200px) !important;
}
 
#top {
  clear: both;
  height: 80px;
  text-align: left;
}
 
#top #logo {
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  padding: 15px 0 0 40px;
}
 
 
 
/* 讓container占滿視窗*/
.el-container {
    padding: 0;
    margin: 0;
    height: 100vh;
    width:100vw;
}
 
 
</style>

由于我設(shè)置了一個footer和header作為頁頭和頁腳，其高度均為120px，所以我需要對el-aside和el-main中的高度做相應(yīng)的計算，并且由于菜單寬度為200px，所以main中的寬度也要做相應(yīng)的計算，這樣子修飾之后，網(wǎng)頁可以呈現(xiàn)出比較好的效果：