解决el-table缩放表格错位对不齐

最新推荐文章于 2024-12-17 14:30:43 发布

zioMo

最新推荐文章于 2024-12-17 14:30:43 发布

阅读量1.9k

点赞数 4

分类专栏： element-ui 报错解决文章标签： javascript 开发语言前端 elementui

本文链接：https://blog.csdn.net/weixin_45610518/article/details/120957406

版权

报错解决同时被 2 个专栏收录

2 篇文章

订阅专栏

element-ui

1 篇文章

订阅专栏

本文介绍了如何在Vue.js应用中处理el-table组件在窗口缩放时出现的布局错位问题。通过在组件mounted钩子中监听窗口缩放事件，并在methods中定义handleResize函数，确保表格在窗口大小变化时重新调整布局。在组件销毁阶段移除事件监听，避免内存泄漏。具体实现包括调用$refs.table.doLayout()来更新表格布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

doLayout方法解决el-table错位

完整代码

	mounted() {
		//可以先主动调用一次
		this.handleResize()
		window.addEventListener('resize', this.handleResize)
	},
	methods() {
		handleResize() {
			this.$nextTick(() => {
				this.$refs.table.doLayout()
			})
		},
	},
	destroyed() {
		window.removeEventListener('resize', this.handleResize)
	},