el-table设置高度自适应,动态设置height
vue+el-table设置高度自适应,动态设置height
·
前提:
当遇到不同浏览器不同屏幕尺寸时,想让el-table有个自适应的高度。只需三个步骤即可实现。
1、 首先在el-table中动态绑定一个高度 :height="tableHeight", 并在data中声明tableHeight。
<el-table
ref="multipleTable"
:data="tablist"
style="width: 100%"
v-if="tableHeight"
:height="tableHeight"
>
</el-table>
data(){
return {
tableHeight: "",//表格高度
}
}
2、 声明一个方法来计算el-table高度
methods: {
//计算table高度(动态设置table高度)
getTableHeight() {
let tableH = 210; //距离页面下方的高度
let tableHeightDetil = window.innerHeight - tableH;
if (tableHeightDetil <= 300) {
this.tableHeight = 300;
} else {
this.tableHeight = window.innerHeight - tableH;
}
},
}
3、 在created中调用该方法并给mounted挂载window.onresize事件
mounted() {
//挂载window.onresize事件(动态设置table高度)
let _this = this;
window.onresize = () => {
if (_this.resizeFlag) {
clearTimeout(_this.resizeFlag);
}
_this.resizeFlag = setTimeout(() => {
_this.getTableHeight();
_this.resizeFlag = null;
}, 100);
};
},
created() {
this.getTableHeight();
},
4、 最后保存,可以通过修改 tableH = 210; 来修改距离页面下方的高度查看效果。
更多推荐
已为社区贡献1条内容
所有评论(0)