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)";
        }
      });
    },