el-table 固定表头。

最近在写vue项目中遇到了需要固定表头的需求

看了element ui 官方给出的是直接给el-table一个固定高度就可以实现，我就尝试了一下

<el-table height="250"></el-table>

确实能够达到表头固定的方法，但是table高度就固定了，想着实现根据网页高度来设置

 <el-table :height="tableHeight"></el-table>

 

<script>

// 获取网站高度

const windowHeight = parseInt(window.innerHeight)

export default {

   data () {

      return {

         windowHeight: windowHeight,

      }

   }

}

// 初始化数据

created () {

   window.addEventListener('resize', this.getHeight)

   this.getHeight()

},

methods: {

   getHeight () {

     this.tableHeight = (windowHeight - 260)

   },

}

 

至此便实现了根据网页高度实现表头吸顶  （注，windowHeight - 260 中的260是我table 上面还有一个高度260的筛选框）