1.Element的table表高度自适应vue3+js写法

解决方法

在页面table上添加id，动态计算每页table的最大高度 ，将高度保存在store中，每次切换路由时进行计算。

前言

提示：状态管理使用的是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状态库

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时，不执行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()
// })

---

效果