脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → element-ui滚动条el-scrollbar置底

element-ui滚动条el-scrollbar置底方式

 更新时间：2022年08月01日 14:22:30   作者：单推人  
这篇文章主要介绍了element-ui滚动条el-scrollbar置底方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

element-ui滚动条el-scrollbar置底

在需要滚动的地方加上

<el-scrollbar ref="myScrollbar"  style="height: 600px"></el-scrollbar>

方法

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

不能在接收数据时调用，需要在页面渲染结束时调用方法

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

element-ui表格滚动条样式el-scrollbar使用问题

实现效果：

问题如下图，原始表格滚动条很丑

想要的效果如下

操作步骤

1、template部分代码

<template>
<!-- 外面的最大的父容器盒子 -->
  <div class="ccc">
    <!-- 使用el-scrollbar标签的效果 -->
    <div class="box">
      <!-- 隐藏标签scrollbar包住所有滚动内容 -->
      <el-scrollbar>
        <el-table :data="tableData" style="width: 100%">
          <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标签普通容器效果 -->
    <div class="box2">
      <el-table :data="tableData" style="width: 100%">
          <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数据部分的代码

<script>
export default {
  // 数据
  data () {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 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;
}
  /* 最为关键得两个样式代码，可以设置全局滚动条样式，也可以按需设置 */
  .ccc ::-webkit-scrollbar {
  /* 设置竖向滚动条的宽度 */
  width: 5px;
  /* 设置横向滚动条的高度 */
  height: 5px;
}
.ccc ::-webkit-scrollbar-thumb {
  /*滚动条的背景色*/
  background-color: rgba(144,147,153,.3);
  border-radius: 35px;
  position: relative;
}
</style>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue中使用go()和back()两种返回上一页的区别说明

    vue中使用go()和back()两种返回上一页的区别说明

    这篇文章主要介绍了vue中使用go()和back()两种返回上一页的区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-07-07
  • 在项目中封装axios的实战过程

    在项目中封装axios的实战过程

    这篇文章主要给大家介绍了关于如何在项目中封装axios的相关资料,axios 请求的封装,无非是为了方便代码管理,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-09-09
  • vue实现左右伸缩方式(el-drawer自定义位置展开收缩)

    vue实现左右伸缩方式(el-drawer自定义位置展开收缩)

    这篇文章主要介绍了vue实现左右伸缩方式(el-drawer自定义位置展开收缩),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • vue中实现支持txt,docx,xlsx,mp4格式文件预览功能(纯前端)

    vue中实现支持txt,docx,xlsx,mp4格式文件预览功能(纯前端)

    对于Vue你可以实现文件的预览功能,这篇文章主要给大家介绍了关于vue中实现支持txt,docx,xlsx,mp4格式文件预览功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • vue如何实现Json格式数据展示

    vue如何实现Json格式数据展示

    这篇文章主要介绍了vue如何实现Json格式数据展示，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • Vue Object 的变化侦测实现代码

    Vue Object 的变化侦测实现代码

    这篇文章主要介绍了Vue Object的变化侦测实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • vue实现评论列表功能

    vue实现评论列表功能

    本文通过实例代码给大家介绍了vue实现评论列表功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
    2019-10-10
  • Vue实现网页首屏加载动画及页面内请求数据加载loading效果

    Vue实现网页首屏加载动画及页面内请求数据加载loading效果

    Loading加载动画组件看起来很简单不重要,实际上它是保证用户留存的关键一环,下面这篇文章主要给大家介绍了关于Vue实现网页首屏加载动画及页面内请求数据加载loading效果的相关资料,需要的朋友可以参考下
    2023-02-02
  • 手把手教学vue的路由权限问题

    手把手教学vue的路由权限问题

    这篇文章主要介绍了手把手教学vue的路由权限问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • vue时间格式总结以及转换方法详解

    vue时间格式总结以及转换方法详解

    项目中后台返回的时间有多种形式,时间戳、ISO标准时间格式等，我们需要转化展示成能看的懂得时间格式,下面这篇文章主要给大家介绍了关于vue时间格式总结以及转换方法的相关资料,需要的朋友可以参考下
    2022-12-12

最新评论