详解Vue3页面如何自适应表格滚动高度

 更新时间:2024年02月03日 09:40:39   作者:大阳光男孩  
这篇文章主要为大家详细介绍了Vue3页面如何自适应表格滚动高度,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下

适用场景:在网页的表格中我们需要获取页面的还可以用的高度来为表格做滚动的时候就需要使用响应高度,可以使用原生的calc来计算,但是calc有个缺陷就是,你要去计算多个盒子的高度,使用下面的代码就可以直接获取当前元素到底部的距离,然后减去总高度即可,是相当的方便 。

TS端代码:

import { ref , onMounted } from "vue";
 
/*
*
* Vue3计算剩余高度
*
*/
export default function () {
 
    //在Init的时候先行调用,然后在监听窗口的变化,保证是最新的宽高度
    onMounted(()=>{
        setWindowResize();
        window.addEventListener('resize',setWindowResize)
    });
 
    //测算基点
    let basePoint = ref();
 
    //元素测试盒子
    let elementWidth = ref(0);
 
    //窗口的高度
    let windowHeight = ref(0);
 
 
    const setWindowResize = function () {
        elementWidth.value = basePoint.value.getBoundingClientRect().top;
        windowHeight.value = window.innerHeight
    }
 
    return { basePoint , elementWidth , windowHeight };
}

页面端代码:

<script setup lang="ts">
  import useCommon from '@/common/useCommon';
 
  const  { basePoint , windowHeight , elementWidth } = useCommon();
 
 
</script>
 
<template>
   <div id="app">
     <div  style="height: 30px;background-color: rosybrown">{{ elementWidth }}</div>
     <div ref="basePoint"></div>
     <div :style="`height:calc( ${ windowHeight } - ${ elementWidth }px);background-color: tan`"></div>
   </div>
</template>
 
<style>
  html, body, #app {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    background-color: rebeccapurple;
  }
</style>

运行效果图:

到此这篇关于详解Vue3页面如何自适应表格滚动高度的文章就介绍到这了,更多相关Vue3页面自适应内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue悬浮表单复合组件开发详解

    vue悬浮表单复合组件开发详解

    这篇文章主要为大家详细介绍了vue悬浮表单复合组件开发,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue.js中数组变动的检测详解

    Vue.js中数组变动的检测详解

    这篇文章给大家主要介绍了Vue.js中数组变动的检测,文中给出了详细的示例代码和过程介绍,相信会对大家的理解和学习很有帮助,有需要的朋友们下面来一起看看吧。
    2016-10-10
  • vue父子组件的互相传值和调用

    vue父子组件的互相传值和调用

    这篇文章主要介绍了vue父子组件的互相传值和调用,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-04-04
  • vue.js 获取当前自定义属性值

    vue.js 获取当前自定义属性值

    本篇文章主要介绍了vue.js 获取当前自定义属性值,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • Vue报错"Failed to resolve loader:less-loader"的解决方法

    Vue报错"Failed to resolve loader:less-loader"的解决方

    这篇文章主要给大家介绍了关于Vue报错"Failed to resolve loader:less-loader"的解决方法,文中通过图文介绍的非常详细,对同样遇到这样问题的朋友具有一定的需要的朋友可以参考下
    2023-02-02
  • 前端使用el-table自带排序功能\后端排序方法实例

    前端使用el-table自带排序功能\后端排序方法实例

    在Vue.js中使用Element UI库时可以通过el-table组件来展示表格数据,并支持列排序,下面这篇文章主要给大家介绍了关于前端使用el-table自带排序功能\后端排序的相关资料,需要的朋友可以参考下
    2024-08-08
  • vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解

    vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解

    这篇文章主要介绍了vue项目中企业微信使用js-sdk时config和agentConfig配置,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12
  • petite vue 基本使用指南示例小结

    petite vue 基本使用指南示例小结

    petite-vue 是为渐进增强而优化的另一种 Vue 发行版,它提供与标准 Vue 相同的模板语法和反应性心智模型,这篇文章主要介绍了petite vue 基本使用指南,需要的朋友可以参考下
    2024-07-07
  • Vue3 Element Plus el-form表单组件示例详解

    Vue3 Element Plus el-form表单组件示例详解

    这篇文章主要介绍了Vue3 Element Plus el-form表单组件,Element Plus 是 ElementUI 的升级版,提供了更多的表单控件和功能,同时还改进了一些细节和样式,本文结合示例代码给大家详细讲解,需要的朋友可以参考下
    2023-04-04
  • vue style width a href动态拼接问题的解决

    vue style width a href动态拼接问题的解决

    这篇文章主要介绍了vue style width a href动态拼接问题的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08

最新评论