【Bug小记】antd表格高度自适应窗口高度
需求:就是标题,要求表格可以随页面窗口高度自适应,铺满。过程:项目使用的antd-Vue 组件,组件属性里可以设置表格的高度,通过设置固定高度,当表格高度大于y值时,就生成滚动条来固定表格的高度。(这里的scroll是针对表格内部数据做的限制,而不是整个组件。)但是固定值,不能像宽度一样自适应(直接设置外层容器百分比就可以实现自适应)。解决:通过Window.onresize 事件来监听窗口大小的
·
需求:
就是标题,要求表格可以随页面窗口高度自适应,铺满。
过程:
项目使用的 antd-Vue 组件,组件属性里可以设置表格的高度,
通过设置固定高度,当表格高度大于y值时,就生成滚动条来固定表格的高度。
(这里的scroll是针对表格内部数据做的限制,而不是整个组件。)
但是固定值,不能像宽度一样自适应(直接设置外层容器百分比就可以实现自适应)。
解决:
通过Window.onresize 事件来监听窗口大小的变化,然后 document.body.clientHeight 获取窗口的高度,根据这个值来修改表格的高度。
//Typescript写的
public clientHeight = 0;
//监听视窗大小变化
mounted() {
const that = this;
window.onresize = () => {
return (() => {
that.clientHeight = document.body.clientHeight;
//可直接在这里做修改操作
......
})();
};
}
//我要多次复用,所以上面的写在一个单独JS文件,然后Mixins混入使用
//在引入的页面Watch监听,在回调函数内部进行修改操作
@Watch('clientHeight')
private getHeight() {
//修改操作
......
}
更多推荐
已为社区贡献6条内容
所有评论(0)