js结合vue操作dom元素 动态设置table表格的高度实例

vue监听window.resize方法

<template> <div id="app"> <div :style="{width: `${screenWidth}px`}"> <router-view/> </div> </div> </template> <script> export default { name: 'App', data () { return { screenWidth: document.body.clientWidth } }, mounted () { const that = this window.onresize = () => { return (() => { window.screenWidth = document.body.clientWidth that.screenWidth = window.screenWidth })() } }, watch: { screenWidth (val) { this.screenWidth = val } } } </script>

动态设置table表格的高度实例

resetTableHeight() { this.$nextTick(() => { let dov = this.$refs["salary-scale-div"]; let height = window.getComputedStyle(dov).height; if (height == "240px") { this.$refs["el-table-div"].style.height = "calc(100% - 270px)"; } else if (height == "284px") { this.$refs["el-table-div"].style.height = "calc(100% - 314px)"; } else if (height == "120px") { this.$refs["el-table-div"].style.height = "calc(100% - 150px)"; } }); },