其他分享
首页 > 其他分享> > element 表格高度自适应

element 表格高度自适应

作者:互联网

<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(() => {
      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>

  

标签:el,表格,200,self,element,适应,window,tableH,refs
来源: https://www.cnblogs.com/czwhandsome/p/16350713.html