vue Table 表格自适应窗口高度,表头固定

当表格内纵向内容过多时,可选择固定表头。

代码很简单,其实就是在table 里面定一个 height 属性即可。

html 复制代码
<template>
  <el-table
    :data="tableData"
    height="250"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    }
  }
</script>

问题出现了,不同的屏幕分辨率下,高度是不一样的,如果直接定义成固定的,肯定是不理想的

解决办法

html 复制代码
<template>
  <el-table
    :data="tableData"
    :height="windowHeight"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        windowHeight: window.innerHeight,
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    },
	mounted() {
	  // 监听窗口大小变化事件
	  window.addEventListener('resize', this.handleResize);
	},
	beforeDestroy() {
	  // 移除事件监听器,避免内存泄漏
	  window.removeEventListener('resize', this.handleResize);
	},
	methods: {
	    handleResize() {
	      // 更新窗口高度
	      this.windowHeight = window.innerHeight;
	    }
	 }
  }
</script>

其实就是监听窗口的大小变化,然后动态调整 windowHeight 属性值即可。

逻辑很简单,实现起来也很简单,入不了众老鸟的眼

相关推荐
独立开阀者_FwtCoder27 分钟前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句38 分钟前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom44 分钟前
JavaScript reduce()函数详解
javascript
小飞悟1 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子1 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手1 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
炒毛豆2 小时前
vue3.4中的v-model的用法~
前端·vue.js
前端康师傅2 小时前
JavaScript 中你不知道的按位运算
前端·javascript
tianchang2 小时前
策略模式(Strategy Pattern)深入解析与实战应用
前端·javascript·代码规范
best6662 小时前
JavaScript的Math内置对象,到底是何方神圣?
javascript