浙江信息港官网首页_网页设计实验报告实验原理_搜狗指数_网站建站网站

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

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

<template><el-table:data="tableData"height="250"borderstyle="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="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>

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

解决办法

<template><el-table:data="tableData":height="windowHeight"borderstyle="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="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 属性值即可。

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