問題描述

在Table表格中，當(dāng)內(nèi)容超出容器時就會出現(xiàn)滾動條，elemnt-ui自帶的滾動條有時無法滿足需求，那么我們可以通過css偽類來實現(xiàn)對滾動條的自定義。

滾動條由兩部分組成的：

• 滑塊：可以滑動的部分。
• 軌道：滾動條的軌道，即滑塊的軌道。一般來說滑塊的顏色比軌道的顏色深一些。

解決方案

1. 滾動條的 css 樣式組成部分：

::-webkit-scrollbar         滾動條整體部分
::-webkit-scrollbar-thumb   滾動條里面的滑塊，能向上向下移動（或往左往右移動，取決于是垂直滾動條還是水平滾動條）
::-webkit-scrollbar-track   滾動條的軌道（里面裝有Thumb）
::-webkit-scrollbar-button  滾動條的軌道的兩端按鈕，允許通過點擊微調(diào)小方塊的位置。
::-webkit-scrollbar-track-piece  內(nèi)層軌道，滾動條中間部分（除去）
::-webkit-scrollbar-corner  邊角，即兩個滾動條的交匯處
::-webkit-resizer  兩個滾動條的交匯處上用于通過拖動調(diào)整元素大小的小控件

2. 修改單個滾動條樣式

<style lang="scss" scoped>
.el-table {
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
      width: 10px; /*滾動條寬度*/
      height: 10px; /*滾動條高度*/
  }
  /*定義滾動條軌道 內(nèi)陰影+圓角*/
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
      box-shadow: 0px 1px 3px #071e4a inset; /*滾動條的背景區(qū)域的內(nèi)陰影*/
      border-radius: 10px; /*滾動條的背景區(qū)域的圓角*/
      background-color: #071e4a; /*滾動條的背景顏色*/
  }
  /*定義滑塊 內(nèi)陰影+圓角*/
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
      box-shadow: 0px 1px 3px #00a0e9 inset; /*滾動條的內(nèi)陰影*/
      border-radius: 10px; /*滾動條的圓角*/
      background-color: #00a0e9; /*滾動條的背景顏色*/
  }
}
</style>

3. 修改全局滾動條樣式(推薦)

HTML代碼

<template>
  <div class="wrap">
    <el-table
      :data="tableData"
      height="300"
      border>
      <el-table-column prop="date" label="日期" width="250"></el-table-column>
      <el-table-column prop="name" label="姓名" width="250"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <hr/>
    <div style="height:300px;overflow:auto;">
      <div style="height:500px;width:100%;"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() { 
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }
      ]
    } 
  }, 
}
</script> 

CSS代碼

把以下代碼放到 index.html 的 css 里面，或者放到 app.vue 的 css 樣式里面。

<style lang="scss">
::-webkit-scrollbar {
  width: 6px;
  height: 8px;
  background-color: #ebeef5;
}
::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #ccc;
}
::-webkit-scrollbar-track{
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  background: rgba(255, 255, 255, 1);
}
</style>

到此為止，我們修改表格Table組件中滾動條樣式的問題就解決啦。在此，感謝@明天也要努力 大佬的文章，才讓我完成此方法的整理，非常感謝。文章來源地址http://www.zghlxwxcb.cn/news/detail-504741.html

到了這里，關(guān)于vue | element-ui中 如何修改表格Table組件中滾動條的樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！