[从零开始vue3+vite+ts+pinia+router4后台管理(11)-表格可视区域内滚动

代码gitee地址

在线预览

系列文章

从零开始vue3+vite+ts+pinia+router4后台管理(1)

从零开始vue3+vite+ts+pinia+router4后台管理(2)-页面布局

从零开始vue3+vite+ts+pinia+router4后台管理(3)-动态路由

从零开始vue3+vite+ts+pinia+router4后台管理(4)-导航标签栏和keep-alive缓存

从零开始vue3+vite+ts+pinia+router4后台管理(5)-二次封装表格1.0

从零开始vue3+vite+ts+pinia+router4后台管理(6)-全局自定义指令实现节流与防抖

什么才是完美的表格二次封装elementPlus表格？-从零开始vue3+vite+ts+pinia+router4后台管理(7)

elementPlus-Form封装动态表单-从零开始vue3+vite+ts+pinia+router4后台管理(8)

优雅的使用element-plus的dialog-从零开始vue3+vite+ts+pinia+router4后台管理(9)

表格拖拽插件从零开始vue3+vite+ts+pinia+router4后台管理(10)

bash 复制代码

# 克隆项目 gitee地址
git clone https://gitee.com/3439/Spurs-Admin.git

# 进入项目目录
cd Spurs-Admin

# 安装依赖
npm install

# 本地开发 启动项目
npm run dev

需求

具体需求就是：整个页面不出现滚动条，而超出的部分让table自适应高度（即：让table内部出现滚动条），从而让整个页面一屏显示完整。

效果图

实现原理

当el-table 表格所需的高度大于最大高度max-height或者高度height，则会显示一个滚动条。所以我们只需要给el-table固定一个高度，让页面整个高度不要超过窗口高度，就不会把其他元素卷走了

我们用窗口高度（window.innerHeight）减头部的高度减底部分页的高度就能得到底部的高度

1.自定义指令实现

typescript 复制代码

import {App, DirectiveBinding} from "vue";
export default (app: App) => {
    //表格可视区域内滚动
    app.directive("allheight", {
        mounted(el: HTMLElement | any, binding: DirectiveBinding) {
            const top:number = el.offsetTop//el-table距离窗口顶部偏移量
            const bottom:number = binding?.value?.bottom ? binding.value.bottom : 65//底部预留的高度 默认高度52
            const pageHeight:number = window.innerHeight//页面的高度
            el.style.height = pageHeight - top - bottom-90 + 'px'
        }
    })

}

然后表格里面使用，有一

有一个问题是当页面只有很少数据，表格并不会自适应高度

看了elementplus的文档

通过设置 max-height 属性为 el-table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。

上面的代码改成el.style.maxHeight = pageHeight - top - bottom-90 + 'px'也并没有效果

谁有更好的方法欢迎评论区评论

那我们能不能在hook函数的里面去动态设置max-height的值

2.去hook函数里面实现

typescript 复制代码

const top:number = 160//el-table距离窗口顶部偏移量
const bottom:number = 45//底部的高度
const pageHeight:number = window.innerHeight//页面的高度
if(document.getElementsByClassName("el-pagination").length>0){
    //判断页面有木有分页，来控制表格的高度自适应
    tableHeight.value = pageHeight - top - bottom + 'px'
}else {
    tableHeight.value = pageHeight - top + 'px'
}

去使用

这里top和bottom的值都是自己定义的，根据有木有el-pagination这个class来判断是否有分页，这么表格的高度就自适应啦

有的时候我们可能会在头部底部加点东西或者页面上搜索表单是可以展开收起的，当我展开更多表单搜索时，表格高度没变，页面又可以滚了这个时候我们写一个方法，传入top和bottom两个值给个默认值，特殊情况的话自己就传值，也可以自己去计算dom的高度，去自定义在useTable.ts加入方法

typescript 复制代码

const getTableHeight = (tabletop:160,tablebottom:45):void =>{
    const top:number = tabletop//el-table距离窗口顶部偏移量
    const bottom:number = tablebottom//
    const pageHeight:number = window.innerHeight//页面的高度
    if(document.getElementsByClassName("el-pagination").length>0){
        //判断页面有木有分页，来控制表格的高度自适应
        tableHeight.value = pageHeight - top - bottom + 'px'
        console.log("111")
    }else {
        console.log("222")
        tableHeight.value = pageHeight - top + 'px'
    }
    console.log(tableHeight);
}