element-ui滾動(dòng)條el-scrollbar置底的方法

本篇內(nèi)容主要講解“element-ui滾動(dòng)條el-scrollbar置底的方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“element-ui滾動(dòng)條el-scrollbar置底的方法”吧!

element-ui滾動(dòng)條el-scrollbar置底

在需要滾動(dòng)的地方加上

<el-scrollbar ref="myScrollbar"  ></el-scrollbar>

方法

 scrollDown() {
        this.$refs['myScrollbar'].wrap.scrollTop = this.$refs['myScrollbar'].wrap.scrollHeight
 }

不能在接收數(shù)據(jù)時(shí)調(diào)用，需要在頁面渲染結(jié)束時(shí)調(diào)用方法

updated: function() {
      this.scrollDown()
    }

element-ui表格滾動(dòng)條樣式el-scrollbar使用問題

實(shí)現(xiàn)效果：

問題如下圖，原始表格滾動(dòng)條很丑

想要的效果如下

操作步驟

1、template部分代碼

<template>
<!-- 外面的最大的父容器盒子 -->
  <div class="ccc">
    <!-- 使用el-scrollbar標(biāo)簽的效果 -->
    <div class="box">
      <!-- 隱藏標(biāo)簽scrollbar包住所有滾動(dòng)內(nèi)容 -->
      <el-scrollbar>
        <el-table :data="tableData" >
          <el-table-column prop="date" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="480"> </el-table-column>
          <el-table-column prop="address" label="地址" width="480"> </el-table-column>
          <el-table-column prop="address" label="地址" width="480"> </el-table-column>
          <el-table-column prop="address" label="地址" width="480"> </el-table-column>
          <el-table-column prop="address" label="地址" width="480"> </el-table-column>
          <el-table-column prop="address" label="地址" width="480"> </el-table-column>
          <el-table-column prop="address" label="地址" width="480"> </el-table-column>
          <el-table-column prop="address" label="地址" width="480"> </el-table-column>
          <el-table-column prop="address" label="地址" width="480"> </el-table-column>
          <el-table-column prop="address" label="地址" width="480"> </el-table-column>
          <el-table-column prop="address" label="地址" width="480"> </el-table-column>
          <el-table-column prop="address" label="地址" width="480"> </el-table-column>
        </el-table>
      </el-scrollbar>
    </div>
    <!-- 沒有使用el-scrollbar標(biāo)簽普通容器效果 -->
    <div class="box2">
      <el-table :data="tableData" >
          <el-table-column prop="date" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="480"> </el-table-column>
          <el-table-column prop="address" label="地址" width="480"> </el-table-column>
          <el-table-column prop="address" label="地址" width="480"> </el-table-column>
          <el-table-column prop="address" label="地址" width="480"> </el-table-column>
          <el-table-column prop="address" label="地址" width="480"> </el-table-column>
          <el-table-column prop="address" label="地址" width="480"> </el-table-column>
          <el-table-column prop="address" label="地址" width="480"> </el-table-column>
          <el-table-column prop="address" label="地址" width="480"> </el-table-column>
          <el-table-column prop="address" label="地址" width="480"> </el-table-column>
          <el-table-column prop="address" label="地址" width="480"> </el-table-column>
          <el-table-column prop="address" label="地址" width="480"> </el-table-column>
          <el-table-column prop="address" label="地址" width="480"> </el-table-column>
        </el-table>
    </div>
  </div>
</template>

2、script數(shù)據(jù)部分的代碼

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

3、css樣式部分代碼

<style>
.ccc .box {
  width: 100%;
  height: 400px;
  border: 1px solid red;
  margin: 0 auto;
  white-space: nowrap;
}
.ccc .el-scrollbar {
  height: 100%;
}
.ccc .box2 {
  margin-top: 50px;
  height: 200px;
  overflow: overlay;
}
  /* 最為關(guān)鍵得兩個(gè)樣式代碼，可以設(shè)置全局滾動(dòng)條樣式，也可以按需設(shè)置 */
  .ccc ::-webkit-scrollbar {
  /* 設(shè)置豎向滾動(dòng)條的寬度 */
  width: 5px;
  /* 設(shè)置橫向滾動(dòng)條的高度 */
  height: 5px;
}
.ccc ::-webkit-scrollbar-thumb {
  /*滾動(dòng)條的背景色*/
  background-color: rgba(144,147,153,.3);
  border-radius: 35px;
  position: relative;
}
</style>

到此，相信大家對“element-ui滾動(dòng)條el-scrollbar置底的方法”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！