element 表格高度自适应

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

<template>   <div>     <el-table       :data="tableData"       style="width: 100%"       ref="tabless"       :height="tableH"     >       <el-table-column prop="date" label="日期" width="180"> </el-table-column>       <el-table-column prop="name" label="姓名" width="180"> </el-table-column>       <el-table-column prop="address" label="地址"> </el-table-column>     </el-table>   </div> </template>   <script> export default {   data() {     return {       tableData: [],       tableH: 0,     };   },   mounted() {     this.$nextTick(() => {<br>　　　　//this.$refs.tabless.$el.offsetTop  表格距离浏览器的高度<br>　　　　//200 是表格距离底部的高度,留出空间放所需要的东西<br>       this.tableH = window.innerHeight - this.$refs.tabless.$el.offsetTop - 200;       //监听窗口的大小变化       let self = this;       window.onresize = function () {         self.tableH =           window.innerHeight - self.$refs.tabless.$el.offsetTop - 200;       };     });   },   destroyed() {     window.onresize = null;   }, }; </script>