Vue 获取dom元素宽高，给element表格设置动态高度

谁借莪１个温暖的怀抱￠ 2023-02-15 07:54 9阅读 0赞

[https://blog.csdn.net/aithena/article/details/103251010?utm\_medium=distribute.pc\_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-2.control&dist\_request\_id=&depth\_1-utm\_source=distribute.pc\_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-2.control][https_blog.csdn.net_aithena_article_details_103251010_utm_medium_distribute.pc_relevant.none-task-blog-2_7Edefault_7EBlogCommendFromMachineLearnPai2_7Edefault-2.control_dist_request_id_depth_1-utm_source_distribute.pc_relevant.none-task-blog-2_7Edefault_7EBlogCommendFromMachineLearnPai2_7Edefault-2.control]

Vue获取元素高度.

let titles = document.getElementsByClassName("nav-title");
    let footer = document.querySelector(".pagefooter").offsetTop;
    //vm.$el获取Vue实例关联的DOM元素；
    let scrollview = this.$el.querySelector("#scrollview");
    
    this.$nextTick(() => {
      console.log(this.$refs.element.offsetHight);
    })

//获取table的宽度

:style="'width:'+dataWidths+'px'"
    
    let dataWidth = this.$refs.element.offsetWidth;//offsetHeight

// 获取浏览器可视区域高度
        this.clientWidth = `${document.documentElement.clientWidth}`;
        this.clientHeight = `${document.documentElement.clientHeight}`;
        console.log(this.clientWidth)

// 获取高度值 （内容高+padding+边框）

let height= this.$refs.element.offsetHeight;  //100 offsetWidth

// 获取元素样式值 （存在单位）

let height = window.getComputedStyle(this.$refs.element).height; // 100px width

//获取元素内联样式值（非内联样式无法获取）

let height = this.$refs.element.style.height; // 100px width

[https_blog.csdn.net_aithena_article_details_103251010_utm_medium_distribute.pc_relevant.none-task-blog-2_7Edefault_7EBlogCommendFromMachineLearnPai2_7Edefault-2.control_dist_request_id_depth_1-utm_source_distribute.pc_relevant.none-task-blog-2_7Edefault_7EBlogCommendFromMachineLearnPai2_7Edefault-2.control]: https://blog.csdn.net/aithena/article/details/103251010?utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromMachineLearnPai2~default-2.control&dist_request_id=&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromMachineLearnPai2~default-2.control