avue表格因页面缩放导致错位问题解决
avue表格因页面缩放导致错位问题解决一、前置知识avue错位问题可以通过重新渲染解决this.$refs.originPlace.refreshTable();参考:Avue使用心得页面缩放的监听方法window.onresize1. 尝试在vue中使用window.onresize 时不生效,采用addEventListener方式书写才能生效;参考:vue中window.onresize无效
·
avue表格因页面缩放导致错位问题解决
一、前置知识
-
avue错位问题可以通过重新渲染解决
this.$refs.originPlace.refreshTable();
-
页面缩放的监听方法
window.onresize
1. 尝试在vue中使用
window.onresize
时不生效,采用addEventListener
方式书写才能生效;2. 在
mounted
中设置对resize
的监听即可实现监听页面尺寸改变;
二、实际代码:
<template>
<div>
<avue-crud ref="originPlace"></avue-crud>
</div>
</template>
<script>
export default {
data() {
return {
screenWidth: document.documentElement.clientWidth, // 屏幕宽度
}
},
mounted() {
// 页面尺寸改变,重新渲染avue表格,避免表格错位
window.addEventListener(
'resize',
() => {
if(Math.abs(this.screenWidth - document.body.clientWidth) > 20) {
this.$nextTick(() => {
this.$refs.originPlace.refreshTable();
})
}
this.screenWidth = document.body.clientWidth;
}
)
},
}
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)