vue使用Element隱藏側邊欄進度條

 

 遇到的問題：當展開側邊欄的時候，如果超出高度，會出現進度條，並且會擠開右邊的區域

解決方法:

可以用element-ui 里的一個組件 ，文檔里面沒有說明；

<el-scrollbar></el-scrollbar>
把需要滾動的內容放在這個標簽里  加上個height     就是滾動區域的高 ：

<template>
  <div class="home">
    <el-container>
      <el-header style="padding:0px;height:70px;">
        <Mheader/>
      </el-header>
      <el-container style="max-height: calc(100vh - 70px);height:100vh;">
        <el-aside style="width:auto;">
          <el-scrollbar class="aside_scroll" style="height:100%;">
            <Maside/>        <!-- 使用el-scrollbar將要滾動的內容包裹起來 -->
          </el-scrollbar>
        </el-aside>
        <el-main style="background:yellow;padding:0px;">
          
          <h1>content</h1>
          <h1>content</h1>
          <router-view/>
          <el-footer style="background:pink;bottom:0px;position:fixed;width:100%;">footer</el-footer>
        </el-main>
      </el-container>
    </el-container>
    
  </div>
</template>

<script>

import Maside from '../components/main/M_aside'
import Mheader from '../components/main/M_header'

export default {
  name: 'Home',
  components: {
    Maside,
    Mheader
  }
}
</script>

<style scoped>

</style>

會出現一個橫向的滾動條，如果不想要橫向的滾動條，使用下面css屬性設置就可以只顯示豎向滾動條。

//該代碼放在app.js 中
.el-scrollbar__wrap {
overflow-x: hidden;
}