表格切换闪烁的原因el-table-column 没有固定宽度导致切换标签页时表格重新计算列宽产生视觉变化闪烁形象表格实际需求的分析需要实现自动适应视窗宽度表格至终不会有横向滚动条最佳解决方案显式设置列宽 未尾占位空列1、显式设置列宽 width解决表格来回切换出现的闪烁问题2、未尾占位空列固定右侧不设置列宽让其自动适应视窗宽度因为其是空列视觉上不会造成闪烁最终会填充满整个表格的右侧因为表格有边框不然显示会有空隙template el-table reftableRef :datalocalData :borderfalse highlight-current-row :header-row-style{ height: 48px } stylewidth: 100%; height: 100% row-keyid !-- 表格切换闪烁的原因el-table-column 没有固定宽度导致切换标签页时表格重新计算列宽产生视觉变化闪烁形象 表格实际需求的分析需要实现自动适应视窗宽度表格至终不会有横向滚动条 最佳解决方案显式设置列宽 未尾占位空列 1、显式设置列宽 width解决表格来回切换出现的闪烁问题 2、未尾占位空列固定右侧不设置列宽让其自动适应视窗宽度因为其是空列视觉上不会造成闪烁最终会填充满整个表格的右侧因为表格有边框不然显示会有空隙 -- el-table-column propname label名称 header-alignleft show-overflow-tooltip width1300 template #default{ row } el-input v-modelrow.name clearable maxlength100 show-word-limit input() handleInput(row) / /template /el-table-column el-table-column label操作 header-aligncenter aligncenter fixedright width300 template #default{ row } !-- 保存按钮 -- BasePreventReClickButtonEmit classshort-btn typeprimary sizedefault plain :disabled!dirtyState[row.id] click(event: MouseEvent, done: () void) handleSave(row, event, done) 保存/BasePreventReClickButtonEmit !-- 取消按钮 -- BasePreventReClickButtonEmit classshort-btn typeinfo sizedefault plain :disabled!dirtyState[row.id] click(event: MouseEvent, done: () void) handleCancel(row, event, done) 取消/BasePreventReClickButtonEmit !-- 删除按钮 -- BasePreventReClickButtonEmit classshort-btn typedanger sizedefault plain click(event: MouseEvent, done: () void) handleDelete(row, event, done) 删除/BasePreventReClickButtonEmit /template /el-table-column !-- 未尾占位空列固定右侧不设置列宽让其自动适应视窗宽度因为其是空列视觉上不会造成闪烁最终会填充满整个表格的右侧因为表格有边框不然显示会有空隙 -- el-table-column fixedright / !-- 空数据时显示增加按钮 -- template #empty el-button typeprimary :iconPlus circle clickhandleAdd / /template /el-table /template