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 属性值即可。

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

相关推荐
yzzzzzzzzzzzzzzzzz22 分钟前
JavaScript 操作 DOM
开发语言·javascript·ecmascript
再学一点就睡1 小时前
实现大文件上传全流程详解(补偿版本)
前端·javascript·面试
你的人类朋友2 小时前
【Node&Vue】什么是ECMAScript?
前端·javascript·后端
shix .4 小时前
最近 | 黄淮教务 | 小工具合集
前端·javascript
烛阴4 小时前
解锁动态键:TypeScript 索引签名完全指南
前端·javascript·typescript
秉承初心5 小时前
Node.js 开发 JavaScript SDK 包的完整指南(AI)
开发语言·javascript·node.js
芜青9 小时前
JavaScript手录18-ajax:异步请求与项目上线部署
开发语言·javascript·ajax
织_网9 小时前
Electron 核心 API 全解析:从基础到实战场景
前端·javascript·electron
2401_837088509 小时前
setup 语法糖核心要点
开发语言·前端·javascript
你也向往长安城吗10 小时前
基于 navmesh 的路径搜索技术剖析 (游戏、三维方向必看!!!)
javascript·游戏·游戏开发