<!--
 * @Descripttion: Vue设置高度为浏览器高度
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-07-03 09:10:28
 * @LastEditors: zhangfan
 * @LastEditTime: 2020-07-16 17:42:53
--> 

  <template>
  <div class="tableBox">
    <el-table :data="creatData" style="width: 100%" :max-height="height_top">
      <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 {
      height_top: 630,
      winHeight: window.innerHeight,
      tableData: []
    };
  },
  computed: {
    creatData() {
      var dataSelct = [];
      for (var i = 1; i <= 200; i++) {
        var obj = {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        };
        dataSelct.push(obj);
      }
      return dataSelct;
    }
  },
  mounted() {
    //挂载浏览器高度获取方法
    const that = this;
    window.onresize = () => {
      return (() => {
        that.winHeight = window.innerHeight;
      })();
    };
    that.height_top = that.winHeight - 360;
  },
  methods: {}
};
</script>

<style  scoped lang="less">
.tableBox {
  width: 1000px;
  height: auto;
  margin: auto;
  padding: 150px 0;
}
</style>