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

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

相关推荐
前端小咸鱼一条21 分钟前
React组件化的封装
前端·javascript·react.js
随便起的名字也被占用28 分钟前
leaflet中绘制轨迹线的大量轨迹点,解决大量 marker 绑定 tooltip 同时显示导致的性能问题
前端·javascript·vue.js·leaflet
JuneXcy1 小时前
11.Layout-Pinia优化重复请求
前端·javascript·css
天下无贼!1 小时前
【自制组件库】从零到一实现属于自己的 Vue3 组件库!!!
前端·javascript·vue.js·ui·架构·scss
PineappleCoder2 小时前
JS 作用域链拆解:变量查找的 “俄罗斯套娃” 规则
前端·javascript·面试
知识分享小能手2 小时前
Vue3 学习教程,从入门到精通,Vue3 中使用 Axios 进行 Ajax 请求的语法知识点与案例代码(23)
前端·javascript·vue.js·学习·ajax·vue·vue3
533_2 小时前
[echarts] 更新数据
前端·javascript·echarts
讨厌吃蛋黄酥2 小时前
利用Mock实现前后端联调的解决方案
前端·javascript·后端
zzywxc7873 小时前
在处理大数据列表渲染时,React 虚拟列表是提升性能的关键技术,但在实际实现中常遇到渲染抖动和滚动定位偏移等问题。
前端·javascript·人工智能·深度学习·react.js·重构·ecmascript
前端小巷子3 小时前
Vue 2 Diff 算法
前端·vue.js·面试