ElementUI table设置高度的时候才能固定表头,记录一下如何动态设置表个高度
<div id="app">
<el-table border :height= "table.style.height">
<el-table-column
prop="field"
label="字段"
align="center">
</el-table-column>
</el-table>
</div>
<script>
let vm1 = new Vue({
el: '#app',
data() {
return {
table: {
style: {
height: "500px" //先给个默认值
}
}
}
},
created() {
},
mounted() {
this.initTableHeight();
const self = this;
window.onresize = function () {
//实现缩放时动态调整高度
self.initTableHeight();
};
},
methods: {
initTableHeight() {
//计算表格实际高度;
this.$nextTick(()=>{
let tableHeight = 1000;
//此处忽略计算过程,依据实际业务自行计算
this.$set(this.table.style, 'height', tableHeight+'px');
});
},
}
});
</script>