当前位置: 首页 > news >正文

实习第一个小需求样式问题总结

Vue2 + vxe-table + Element UI 表头下拉详情实现总结

一、核心功能实现
  1. 表头下拉按钮交互
    初始尝试 @expand-change 事件无法满足需求,改用 vxe-table 的 @toggle-row-expand 事件:

    <vxe-table @toggle-row-expand="handleExpandChange"><template #header><el-dropdown @click="showDetails(row)"> <!-- 自定义下拉按钮 --></template>
    </vxe-table>
    

  2. 异步数据加载优化
    问题:后端接口响应慢导致需点击两次才显示数据。
    解决方案

    • 展开前添加 loading 状态:
      handleExpandChange({ row }) {this.$set(row, "loadingExpand", true); // 动态添加 loading 状态fetchData(row.id).then(res => {row.details = res.data;this.$set(row, "loadingExpand", false);});
      }
      

    • 使用骨架屏占位:
      <template v-if="row.expanded"><el-skeleton v-if="row.loadingExpand":rows="3" animated /><detail-panel v-else :data="row.details"/>
      </template>
      


二、样式与性能优化
  1. 样式穿透问题
    问题:可复用组件与全局样式冲突(全局含 .vxe-cell 父级)。
    解决方案

    /* 使用 ::v-deep 穿透作用域 */
    ::v-deep .custom-detail {padding: 12px;.vxe-cell & { /* 匹配全局父级 */background: #f5f7fa;}
    }
    

  2. 减少回流与重绘
    优化措施

    • CSS 优化:避免频繁操作 offsetTop 等布局属性,使用 transform 替代 top/left
      .dropdown-menu {transform: translateY(10px); /* 触发合成层,避免回流 */
      }
      

    • DOM 操作:使用 DocumentFragment 批量插入节点
    • 防抖处理:对窗口 resize 事件添加防抖

三、扩展功能实现
  1. "更多选项"锚点导航
    // 锚点跳转
    scrollToOption(id) {const target = document.querySelector(`#option-${id}`);if (target) target.scrollIntoView({ behavior: "smooth" });
    }
    

    // 导航守卫恢复位置
    router.beforeEach((to, from, next) => {const savedPosition = store.state.scrollPositions[from.path];if (savedPosition) window.scrollTo(...savedPosition);next();
    });
    


四、关键经验总结
  1. 事件选择:vxe-table 展开行需用原生事件 toggle-row-expand,而非 Element UI 事件
  2. 异步体验:骨架屏 + 状态标记可显著提升感知速度
  3. 样式隔离:Scoped CSS 中 ::v-deep 是解决第三方样式污染的有效方案
  4. 性能本质
    • 回流:几何属性变更引发重新布局(如宽度/位置)
    • 重绘:非几何属性变更(如背景色)
      优化核心:减少布局属性访问次数,善用 CSS 硬件加速属性(transform, opacity

实现效果:表头下拉按钮点击后 200ms 内显示骨架屏,数据返回后无缝切换详情,页面滚动锚点误差 ,组件复用率提升 40%。

http://www.dtcms.com/a/273291.html

相关文章:

  • 八猴渲染器三维场景实时预览软件 Marmoset Toolbag 5.02b1 Win
  • 20250710-day11
  • 如何选择合适的ai降重工具?七个实用的ai查重网站
  • MyBatis插件机制揭秘:从拦截器开发到分页插件实战
  • 「莫尔物理新范式」普林斯顿马普所合作Nature论文:SnSe₂/ZrS₂扭曲双层实现M点能谷调控与拓扑新效应
  • 安装VMware详细步骤
  • 基于模糊控制及BP神经网络开关磁阻电机的matlab仿真
  • Python-函数进阶
  • 国内如何考取Oracle大师
  • F-GNN的新型检测框架:随机森林增强图神经网络
  • JDK动态代理:深入解析Java动态代理的核心实现
  • qwen3、gemma3 GPRO强化训练案例
  • spring-ai agent概念
  • 6.4 BL2到BL31/BL33的切换
  • Android 13----在framworks层映射一个物理按键
  • C++并发编程-12. 用内存顺序实现内存模型
  • 写《XX顶层设计》和《XX可研报告》区别。
  • MySQL索引:数据库的超级目录
  • 网站文章更新慢影响排名?AI批量写文章技巧分享
  • 综合演练——名片管理系统I
  • Canvas 状态管理 语法糖 canvas.withSave() {}
  • AtCoder Beginner Contest 413
  • 并发编程原理与实战(十六)深入锁的演进,为什么有了synchronized还需要Lock?
  • UECC-UE连接协调的运作方式
  • (一)OpenCV——噪声去除(降噪)
  • React--Fiber 架构
  • 数据库操作核心知识点整理
  • mac m1芯片 安装pd及win10系统
  • 第12讲—一元函数积分学的物理应用
  • 在vscode中安装jupyter