elementui實現滾動條

這種方式整個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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章