---

🧩 前端组件 MOC

知识总览

filters:
  and:
    - 'file.ext == "md"'
    - 'file.inFolder("z")'
    - 'this.file.links.contains(file)'
    - 'file.path != this.file.path'
formulas:
  knowledge: 'file.asLink(title)'
properties:
  formula.knowledge:
    displayName: 知识
  note.description:
    displayName: Description
  note.mastery:
    displayName: Mastery
views:
  - type: table
    name: 知识总览
    order:
      - formula.knowledge
      - note.description
      - note.mastery
    columnSize:
      formula.knowledge: 280
      note.description: 760
      note.mastery: 56

前端 UI 组件开发与使用：组件设计、交互实现、常用组件库等。

---

🎯 快速导航

领域	入口	说明

---

🎨 UI 交互

• vue3-ui-interaction - Vue3 中状态、事件与通信的 UI 交互总览
• ui-design-essentials - UI 设计概念与要点

---

📊 表格组件

• element-table-merge-cells-guide - Element Plus 表格合并单元格实现
• table-row-background-color - el-table 指定行背景变色
• virtual-table-dynamic-cell-merge - 虚拟表格与动态合并
• large-list - 大数据列表实现(虚拟滚动/分页/懒加载)

---

💬 弹窗组件

• elegant-confirm-dialog-implementation - 优雅的确认弹窗实现
• popup-notification-module - Electron 弹窗通知模块
• non-blocking-errors-progress-dialog - 批量操作进度可视化

---

🔧 组件开发

• [private note] - Vue 打印组件封装
• override-component-library-styles - 修改组件库内置样式
• blogs/dailyuse-vue-shared-ui-state-issues - 组件数据更新问题
• Vue Router 重复挂载的排查 - Router Key 导致重复渲染

---

🎯 布局与样式

• button-text-vertical-centering-on-zoom - Flexbox 垂直居中问题

---

📚 相关 MOC

Related notes

• vue3-ui-interaction
• ui-design-essentials
• element-table-merge-cells-guide
• table-row-background-color