element table表头固定，高度自适应
element组件源地址：组件 | Element
在原组件中表头固定需要设置height高度，但是设置以后浏览器高度变化table不会变化，会出现一系列问题，就需要监听浏览器高度变化给height重新赋值。
关键代码
<el-table :data="tableData" style="width: 100%" :height="tableHeight" >
data() { return { clientHeight: document.documentElement.clientHeight, tableHeight:500,// 定义table高度 } },
mounted() { // 重置浏览器高度 window.onresize = () => { this.clientHeight = document.documentElement.clientHeight; } },
created() { // 初始值，自己定义 this.tableHeight = this.clientHeight - 126 },
watch: { // 监听高度变化 clientHeight(newValue, oldValue) { if(newValue) { this.getTableHeight() } } }
methods:{ // 防抖 getTableHeight: debounce(function() { // 给table高度赋值 this.tableHeight = this.clientHeight - 126 }, 300), },
完整代码：
<template>
<div>
<el-table
:data="tableData"
style="width: 100%"
:height="tableHeight"
>
<el-table-column
fixed
prop="date"
label="日期"
width="150">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="province"
label="省份"
width="120">
</el-table-column>
<el-table-column
prop="city"
label="市区"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
width="300">
</el-table-column>
<el-table-column
prop="zip"
label="邮编"
width="120">
</el-table-column>
</el-table>
</div>
</template>
<script>
import {debounce} from "../../../../utils/utils";
export default {
name: "hotTable",
data() {
return {
clientHeight: document.documentElement.clientHeight,
tableHeight:500,// 定义table高度
tableData: [{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-08',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-06',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-08',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-06',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-08',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-06',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-08',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-06',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-08',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-06',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}]
}
},
mounted() {
// 重置浏览器高度
window.onresize = () => {
this.clientHeight = document.documentElement.clientHeight;
}
},
created() {
// 初始值，自己定义
this.tableHeight = this.clientHeight - 126
},
methods:{
// 防抖
getTableHeight: debounce(function() {
// 给table高度赋值
this.tableHeight = this.clientHeight - 126
}, 300),
},
watch: {
// 监听高度变化
clientHeight(newValue, oldValue) {
if(newValue) {
this.getTableHeight()
}
}
}
}
</script>
<style lang="scss">
</style>
debounce防抖代码：防抖在vue中的实现（转载） - 从入门到入土 - 博客园 (cnblogs.com) 项目里边创个工具，用的时候直接引用就可以
