Vue 学习随笔系列二十二 —— 表格高度自适应

表格高度自适应

文章目录

表格高度自适应
- - 1、方法一
  - 2、方法二

1、方法一

根据页面元素计算各自占比

bash 复制代码

<template>
  <div class="main">
    <div class="query-form" ref="Query">
      <QueryForm
        ref="QueryForm"
        @query="query"
      ></QueryForm>
    </div>

    <div class="table-box" ref="Temp">
      <TableModal
        ref="TableModal"
        :maxHeight="tempHeight-200"
        :tableData="tableData"
      ></TableModal>
      <!-- 分页 -->
      <div class="pagination-box flex-h flex-he">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="pageSizes"
          :current-page="pageNum"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          background
          small
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import QueryForm from './QueryForm.vue';
  import TableModal from './TableModal.vue';
  import FileSaver from "file-saver";

  export default {
    components: {
      QueryForm, 
      TableModal,
    },
    data() {
      return {
        tableData: [],
        total: 0,
        pageNum: 1,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100],
        multipleSelection: [],
        maxHeight: 220,
        windowHeight: 0,  // 页面窗口高度
        tempHeight: 0,  // 元素高度
        QueryHeight: 0, // 查询框高度
      }
    },
    mounted() {
      this.query()

      // 自动获取元素高度
      var that = this;
      //刚进入页面时，获取窗口默认宽高度
      this.windowHeight = document.body.clientHeight
      this.QueryHeight = this.$refs.Query.offsetHeight
      //进入页面元素默认宽高
      // this.tempHeight = this.$refs.Temp.offsetHeight
      // this.maxHeight = this.tempHeight - 70
      this.tempHeight = this.windowHeight - this.QueryHeight

      window.onresize = () => {
        return (() => {
          //窗口缩放自动获取页面宽高
          window.fullHeight = document.documentElement.clientHeight;
          this.QueryHeight = this.$refs.Query.offsetHeight
          that.windowHeight = window.fullHeight; //高

          //窗口缩放自动获取元素宽高
          // this.tempHeight = this.$refs.Temp.offsetHeight //高
          // this.maxHeight = this.tempHeight - 70
          this.tempHeight = this.windowHeight - this.QueryHeight
        })()
      }
    },
    methods: {
      // 分页
      handleSizeChange (val) {
        this.pageSize = val
        this.query()
      },
      // 当前页
      handleCurrentChange (val) {
        this.pageNum = val
        this.query()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      query(){
        const form = this.$refs.QueryForm.getParams()
        const params = { ...form, pageNum: this.pageNum, pageSize: this.pageSize}
       	// ....
      },  
    },
  }
</script>

<style lang="scss" scoped>
.main  {
  padding: 10px;
  background-color: #F2F3F5;
} 

// 分页
.pagination-box {
  margin-top: 20px;
  float: right;
}
:deep .pagination-box .el-select--mini .el-input--mini .el-input__inner {
  height: 22px;
  line-height: 22px;
}

:deep .pagination-box .el-select--mini .el-input--mini .el-input__icon {
  line-height: 22px;
}
</style>

2、方法二

直接计算表格高度

bash 复制代码

<template>
    <div>
        <el-card>
            <QueryForm
                ref="queryForm"
                @query="query"
            ></QueryForm>
        </el-card>
    
        <TableColumn
            :tableData="tableData"
            :tableHeight="tableHeight"
        ></TableColumn>
    </div>

</template>

<script>
import QueryForm from "./queryForm.vue"
import TableColumn from './tableColumn.vue'

export default {
    components: {
        QueryForm,
        TableColumn,
    },
    data() {
        return {
            tableData: [],
            tableHeight: 0,
        }
    },
    created() {
      this.tableHeight = window.innerHeight - 340
    },
    mounted() {
        this.query()
        this.handleTableHeight()
    },
    methods: {
        handleTableHeight: function () {
            var _this = this;
            window.onresize = () => {
                _this.tableHeight = window.innerHeight - 346
            };
    
        },
        query() {
            const params = this.$refs.queryForm.getForm()
            // .......
        },

    }
}
</script>

<style lang="less" scoped >
    .el-card {
        margin: 0 0 10px 0;
    }
</style>