當表格內縱向內容過多時，可選擇固定表頭。

代碼很簡單，其實就是在table 里面定一個 height 屬性即可。

<template><el-table:data="tableData"height="250"borderstyle="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></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 弄'}]}}}
</script>

問題出現了，不同的屏幕分辨率下，高度是不一樣的，如果直接定義成固定的，肯定是不理想的

解決辦法

<template><el-table:data="tableData":height="windowHeight"borderstyle="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column></el-table>
</template><script>export default {data() {return {windowHeight: window.innerHeight,tableData: [{date: '2016-05-03',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}]}},mounted() {// 監聽窗口大小變化事件window.addEventListener('resize', this.handleResize);},beforeDestroy() {// 移除事件監聽器，避免內存泄漏window.removeEventListener('resize', this.handleResize);},methods: {handleResize() {// 更新窗口高度this.windowHeight = window.innerHeight;}}}
</script>

其實就是監聽窗口的大小變化，然后動態調整 windowHeight 屬性值即可。

邏輯很簡單，實現起來也很簡單，入不了眾老鳥的眼