自適應(yīng)前的列表問題：
1默责、列表底部與頁面底部有一定距離贬循，頁面不美觀；
2桃序、將頁面進行縮放拖動杖虾，列表高度為固定，不會自適應(yīng)媒熊；
自適應(yīng)前的列表.png
解決辦法：
HTML
給列表一個動態(tài)高度參數(shù)
<el-table :height="tableHeight">
</el-table>
data
data(){
return{
tableHeight: ""
}
}
methods
獲取動態(tài)高度函數(shù)方法
getTableHeight(num) {
const tableH = num ? 120 + num : 120 // 因為頭部還有導航等功能的盒子占位奇适，所以將其高度減掉
this.tableHeight = window.innerHeight - tableH
},
mounted
mounted(){
// resizeFlag表示是否可縮放以及是否可拖拽
const that = this
window.onresize = () => {
if (that.resizeFlag) {
clearTimeout(that.resizeFlag)
}
that.resizeFlag = setTimeout(() => {
that.getTableHeight()
that.resizeFlag = null
}, 100)
}
}
最后created創(chuàng)建
created() {
this.getTableHeight()
},
最終效果：
哪怕導航位置有篩選組件展開，列表也會相應(yīng)增加或減少自己的高度芦鳍，達到自適應(yīng)效果嚷往。
自適應(yīng)高度列表.png
