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

解决方法

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

文章目录

前言

提示:状态管理使用的是pinia,用法参考简单学习pinia

  1. 项目目录

一、页面table使用

  1. 添加: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>
  1. 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()
// })

效果

相关推荐
xw511 分钟前
uni-app项目Tabbar实现切换icon动效
前端·uni-app
凉、介19 分钟前
U-Boot 多 CPU 执行状态引导
java·服务器·前端
时光少年27 分钟前
Android 喷雾效果实现
android·前端
南囝coding35 分钟前
Claude 封禁中国?为啥我觉得是个好消息
前端·后端
wordbaby44 分钟前
备忘录模式(Memento Pattern)详解
前端
小鱼儿亮亮1 小时前
二、React基础精讲:编写TodoList、事件绑定、JSX语法、组件之间传值
前端·react.js
Mintopia1 小时前
实时 AIGC:Web 端低延迟生成的技术难点与突破
前端·javascript·aigc
小鱼儿亮亮1 小时前
五、Redux进阶:UI组件、容器组件、无状态组件、异步请求、Redux中间件:Redux-thunk、redux-saga,React-redux
前端·react.js
Mintopia1 小时前
Next.js 性能优化双绝:Image 与 next/font 的底层修炼手册
前端·javascript·next.js
jingling5551 小时前
uniapp | 解决组件样式不生效问题
前端·css·uni-app·html·学习方法