elementui实现滚动条

向右看齐 2023-02-21 06:41 19阅读 0赞

**这种方式整个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>