Vue 3 —— K / ElementPlus组件库

Element Plus 学习大纲（10-ElementPlus组件库）

一、组件库基础  
1. 组件库：可复用 Vue 实例的集合，降低开发难度  
2. Element Plus：饿了么团队开源的 Vue3 PC 端 UI 库，默认中文，支持国际化  
3. 安装 & 全局引入  
   ```bash
   npm i element-plus
   ```
   ```js
   import ElementPlus from 'element-plus'
   import 'element-plus/dist/index.css'
   app.use(ElementPlus)
   ```

二、Form 表单组件  
1. 布局：Flex 布局，label-width、model、rules  
2. 常用表单项  
   - Input、Select、DatePicker、TimePicker、Switch  
   - CheckboxGroup、RadioGroup、Textarea  
3. 校验  
   - rules 对象 + prop 字段  
   - trigger: blur/change，支持长度、类型、必填、正则等  
   - 整体校验：formRef.value.validate()  
   - 重置：formRef.value.resetFields()

三、Card 卡片组件  
- 三部分结构：header（具名插槽）、body（默认插槽）、footer（具名插槽）  
- 快速生成图文聚合卡片

四、Table 表格组件  
1. 基础用法  
   - data 注入数据源  
   - el-table-column 用 prop、label、width 定义列  
   - stripe 斑马纹、border 边框  
2. 自定义列模板  
   - 利用列插槽 #default="{ row, column, $index }"  
   - 结合 el-icon、el-button 实现操作按钮  
3. 图标补充  
   - 安装 @element-plus/icons-vue  
   - main.js 注册常用图标

五、Tree 树形组件  
- 基础：data + props（label/children）  
- 高级：show-checkbox、accordion、@node-click  
- 自定义节点：scoped slot #default="{ data, node }" 可追加按钮/图标

六、Dialog 弹框组件  
- v-model 控制显示隐藏  
- title、width、before-close  
- 插槽：默认 body、#footer 底部按钮区  
- 结合 ElMessageBox 实现关闭前确认

七、Menu 导航菜单  
- mode="horizontal|vertical" 横/竖模式  
- background-color / text-color / active-text-color  
- el-sub-menu 二级菜单、el-menu-item-group 分组  
- @open/@close 事件，default-active 默认高亮

八、通用套路  
1. 先查文档 → 复制示例 → 调整 props/插槽/事件  
2. 统一尺寸、颜色、图标、校验规则 → 形成规范  
3. 组合式 API 下配合 reactive/ref 管理数据

九、章节口诀  
“Element Plus 组件全，Form 校验 Table 填；  
Card 聚合 Tree 层级，Dialog 弹窗 Menu 导；  
文档示例先照搬，插槽属性再改换；  
掌握一通百通法，后续库皆不犯难。”