记录 pl-table 表格头部文字抖动的问题

本文记录一个实际开发中 pl-table 的问题,项目比较老,vue还是2.x版本。pl-table 是基于 el-table 改造过来的表格展示组件,已经停止更新。

问题描述

  • 当 data 内数据动态改变时,pl-table 的表头部分,列的文字会左右抖动。如果只是打开关闭弹框这样的场景,data 对应的变量只会在打开弹框或关闭弹框变化一次,也就是 pl-table 的表头文字只在打开关闭弹框瞬间抖动一次。但是某次需求是,在弹框中加入倒计时功能,data 中的倒计时变量每隔一秒变化一次,导致 pl-table 的表头文字每秒都在抖动。

解决办法

javascript 复制代码
beforeUpdate() {
  this.$nextTick(() => {
    this.$refs.el_table.doLayout() // el_table: el-table 的 ref 名
  })
},
  • 既然 pl-table 其实也是 el-table 改的,表头文字抖动问题也是共性。
  • 只需在 beforeUpdate 生命周期中,nextTick 任务中,对 el-table 的 ref 对象使用 doLayout() 方法即可。
相关推荐
Hilaku2 小时前
你们公司有 35 岁以上的前端吗?
前端·javascript·程序员
徐小夕2 小时前
开源Vector-Graph-RAG:向量+图谱双引擎,打破纯向量RAG的效果天花板
前端·vue.js·github
鸿蒙开发2 小时前
小程序存档写到一半怎么办?双槽保存与损坏恢复实战
前端·javascript·react.js
知忆_IS3 小时前
TerriaMap 开发实战04:MVT数据自定义符号化 - terriajs源码修改
javascript·webgis·terriamap·terriajs
FungLeo5 小时前
成为全栈·Vue 管理后台篇·Vue3 + Vite + Naive UI:后台工程基座怎么搭
前端·vue.js·ui·typescript·vite·前端工程化·biome
云上工程笔记5 小时前
SRT字幕一键转手绘动画:srt-whiteboard-animation的复刻实录
大数据·开发语言·javascript·人工智能·机器学习
FungLeo6 小时前
成为全栈·Vue管理后台篇·<scriptsetup>:把页面拆成可读、可测的 Vue 组件
前端·javascript·vue.js·typescript·前端组件化·composition api·vue sfc
清晨Coding18 小时前
删了 Cookie 还能自动登录?Google系网站登录态自动恢复的原理分析
javascript
kyriewen18 小时前
我扫了 814 个依赖,97 个还敢要 Node 10
前端·javascript·程序员
程序员大阳20 小时前
HTML+CSS+JS对话式实战(9)-项目总结与问题分析
javascript·css·html·实战·项目总结