elementui实现滚动条

最新推荐文章于 2025-07-13 18:38:21 发布

理会拾光

最新推荐文章于 2025-07-13 18:38:21 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_37206355/article/details/107542038

Vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用Element UI的el-scrollbar组件实现页面滚动效果，并通过设置el-table的高度属性来固定表头，适用于需要展示大量数据的表格场景。

这种方式整个table都会跟着移动，包括标题：

<template>
    <el-scrollbar
        wrapClass="scrollbar-wrap"
        :style="{height: scrollHeight}"
        ref="scrollbarContainer">
        <div>........</div>
    </el-scrollbar>
</template>        
 
<script>
    data () {
        return {
            scrollHeight:'0px'
        }
    }
    mounted(){
        this.scrollHeight = window.innerHeight*0.7 + 'px';
    }
 
</script>
 
<style>
 
    .el-scrollbar{
      height: 90%;
      .scrollbar-wrap{
        overflow-x: hidden;
      }
      .el-scrollbar__bar{
        
      }
    }
</style>

只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。
参考官网：https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes

<template>
  <el-table
    :data="tableData"
    height="250"
    border
    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="地址">
    </el-table-column>
  </el-table>
</template>

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