iview: table 表格高度随浏览器高度自适应

• 1. 要如下效果

     
     image.png
• 2. 代码

<Table:columns="columns" :data="tableData" :height="tableHeight" ></Table>

<script>
  export default {
      data() {
           return {
              tableHeight: 500,
            }
      },
      mounted () {
          setTimeout(() => {
              // 得到浏览器内容高度
            let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
            this.tableHeight = windowHeight - 220;
          }, 100);
            // 没有引入$用：调整浏览器的时候
          window.addEventListener('resize', this.resizeHandle, true);
            
           // 或
           // 有引入$用：调整浏览器的时候
          $(window).on("resize", () => {
              let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
              this.tableHeight = windowHeight - 240;
          });
      },
      methods: {
          // 表格根据浏览器缩放
          resizeHandle () {
              let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
              this.tableHeight = windowHeight - 220;
          },
      }
  }
</script>