解决方法
在页面table上添加id,动态计算每页table的最大高度 ,将高度保存在store中,每次切换路由时进行计算。
文章目录
前言
提示:状态管理使用的是pinia,用法参考
简单学习pinia
- 项目目录
一、页面table使用
- 添加:max-height,和id
html
<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>
- js部分,引入高度tableHeightStore.height,计算高度方法useTableHeightStore().setTableHeight()
javascript
<script setup name="Activity">
import useTableHeightStore from '@/store/modules/table'
const tableHeightStore = useTableHeightStore()
onActivated(() => {
useTableHeightStore().setTableHeight()
})
onMounted(() => {
useTableHeightStore().setTableHeight()
})
</script>
二、store状态库
1.引入库
代码如下(table.js):
javascript
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=this
function tableHeightFun() {
//页面没有table的id时,不执行
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()
// 路由状态-缓存-每次进入页面触发onActivated
// onActivated(() => {
// useTableHeightStore().setTableHeight()
// })
// 路由状态-不缓存-每次进入页面触发onMounted
// onMounted(() => {
// useTableHeightStore().setTableHeight()
// })
效果
![](https://img-blog.csdnimg.cn/direct/196305d389dd4054ba5d94a58d11e5e8.png)