解決方法

在頁面table上添加id，動態(tài)計算每頁table的最大高度 ，將高度保存在store中，每次切換路由時進行計算。

前言

提示：狀態(tài)管理使用的是pinia,用法參考簡單學習pinia

1. 項目目錄
   

一、頁面table使用

1. 添加:max-height，和id

<el-table :max-height="tableHeightStore.height" id="elTableId" ><el-table-column type="selection" width="30" align="center" /><el-table-column label="標題" fixed align="center" prop="title" width="180" />
</el-table>

2. js部分，引入高度tableHeightStore.height，計算高度方法useTableHeightStore().setTableHeight()

<script setup name="Activity">import useTableHeightStore from '@/store/modules/table'const tableHeightStore = useTableHeightStore()onActivated(() => {useTableHeightStore().setTableHeight()})onMounted(() => {useTableHeightStore().setTableHeight()})
</script>

二、store狀態(tài)庫

1.引入庫

代碼如下（table.js）：

const useTableHeightStore = defineStore('table-height',{state: () => ({height: 500,//默認高度}),getters:{},actions:{setHeight(height) {this.height=height//高度賦值},setTableHeight() {//計算高度：窗口高度-表格距離頂部距離-固定高度（底部頁碼高度）this.height= window.innerHeight -document.getElementById("elTableId").getBoundingClientRect().top - 52;//問題：在瀏覽器窗口縮放90%時，table表的滾動條會消失（max-height丟失），解決：操作dom添加document.querySelector('#elTableId .el-scrollbar__wrap').style.maxHeight = this.height - 40 + "px"console.log("路由切換table高度刷新",this.height);window.onresize = () => {console.log("-----","防抖");debounce(tableHeightFun, 200); //防抖};let that=thisfunction tableHeightFun() {//頁面沒有table的id時，不執(zhí)行if(document.getElementById('elTableId')==null)return//問題：在路由切換后，窗口高度變高，table表的max-height不能變大。解決：先賦值變小，再變大。that.height = window.innerHeight - document.getElementById('elTableId').getBoundingClientRect().top - 52 - 1;document.querySelector('#elTableId .el-scrollbar__wrap').style.maxHeight = (that.height - 40 - 1) + "px"setTimeout(() => {that.height=  window.innerHeight -document.getElementById("elTableId").getBoundingClientRect().top -52;document.querySelector('#elTableId .el-scrollbar__wrap').style.maxHeight = (that.height - 40) + "px"console.log("--tableHeightFun---",that.height);}, 200);}var timeout = null; //定義一個定時器function debounce(fn, wait) {if (timeout !== null) clearTimeout(timeout); //清除這個定時器timeout = setTimeout(fn, wait);}}}
})export default useTableHeightStore// table添加
// :max-height="tableHeightStore.height" id="elTableId"// 頁面引入
// import useTableHeightStore from '@/store/modules/table'
// const tableHeightStore = useTableHeightStore()// 路由狀態(tài)-緩存-每次進入頁面觸發(fā)onActivated
// onActivated(() => {
//   useTableHeightStore().setTableHeight()
// })// 路由狀態(tài)-不緩存-每次進入頁面觸發(fā)onMounted
// onMounted(() => {
//   useTableHeightStore().setTableHeight()
// })

---

效果