前端基础学习-自动计算表格高度

最新推荐文章于 2025-07-01 10:43:38 发布

原创最新推荐文章于 2025-07-01 10:43:38 发布 · 793 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #html #css

前端专栏收录该内容

56 篇文章

订阅专栏

本文介绍了一种前端技术，通过监听屏幕尺寸变化，自动调整表格高度，确保表格在不同设备上都能完美展示。主要步骤包括定义表格高度计算函数，使用mixin进行初始化和监听，以及在页面中应用该功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端基础学习-自动计算表格高度

本文实现的效果主要是监听屏幕高度从而自动改变表格高度
效果如下
全屏下
在这里插入图片描述
打开控制台

可以看到表格高度随之改变

第一步
表格height绑定变量
在这里插入图片描述
第二步：引入公共文件计算表格高度

公共文件代码

/**
 * 计算表格高度
 * @returns {number}
 */
export function tableHeightCalc () {
  const MainBodyPadding = 20
  const FullBodyPadding = 20
  const footerWrapperHeight = 48
  return window.innerHeight - 83 - FullBodyPadding * 2 - MainBodyPadding * 2 - footerWrapperHeight
}

第三步：mixin混入初始化表格高度、监听表格高度（tableHeightMixin）
在这里插入图片描述

export default {
  data () {
    return {
      timer: false,
      windowInner: '',
      tableHeightCalc: 0
    }
  },
  mounted () {
    this.initTableHeightCalc()
  },
  watch: {
    windowInner () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.timer = false
        this.tableHeightCalc = this._tableHeightCalc()
      }, 200)
    }
  },
  methods: {
    initTableHeightCalc () {
      let that = this
      setTimeout(() => {
        window.onresize = function () {
          that.windowInner = window.innerHeight + '-' + window.innerWidth
        }
        this._tableHeightCalc && (this.tableHeightCalc = this._tableHeightCalc())
      }, 100)
    }
  }
}

结合当前页面文件代码

  methods: {
    _tableHeightCalc () {
      return tableHeightCalc()
    },
   }

当前页面全部代码

<template>
  <div>
    <el-table  :data="listData" ref="multipleTable" :height="tableHeightCalc">
      <el-table-column prop="name" label="名称" show-overflow-tooltip></el-table-column>
      <el-table-column prop="score" label="分数" show-overflow-tooltip></el-table-column>
      <el-table-column prop="stars" label="星级" show-overflow-tooltip></el-table-column>
      <el-table-column prop="city" label="所在城市" show-overflow-tooltip></el-table-column>
      <el-table-column prop="date" label="操作时间" show-overflow-tooltip></el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="searchForm.page"
      :page-sizes="[15, 30, 50]"
      :page-size="searchForm.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import axios from 'axios'
import commonFuc from '@/assets/js/commonFuc'
import tableHeightMixin from '@/assets/js/tableHeightMixin'
import { tableHeightCalc } from '@/assets/js/common'
export default {
  name: 'multiTable',
  mixins: [commonFuc, tableHeightMixin],
  data () {
    return {
      listData: [],
      searchForm: {
        page: 1,
        size: 15
      },
      total: 0
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    _tableHeightCalc () {
      return tableHeightCalc()
    },
    getList () {
      axios.post('/api/pageList', this.searchForm)
        .then(res => {
          // console.log(res, 'res')
          this.listData = res.data.data.list
          this.total = res.data.data.total
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang='scss' scoped>

</style>