Spring Boot+Vue全栈应用开发实践 课件22 Element Plus UI 组件库

罗荣良ElementPlusUI组件库本节学习目标1.了解UI组件库的作用与优势2.掌握ElementPlus的安装与按需引入配置3.熟练使用栅格系统(el-row,el-col)进行布局4.掌握后台管理核心组件：表格、表单、分页、弹窗5.学会使用反馈组件(ElMessage)为什么选择ElementPlus？地位：Vue3生态中最流行的桌面端组件库。优势：1.Vue3Native：完全基于Vue3+TS重写。2.组件丰富：覆盖99%的B端场景(表格、表单、树)。3.后端友好：不懂CSS也能画出好看的页面。安装与图标库1.安装主库：npminstallelement-plus2.安装图标库(独立包)：npminstall@element-plus/icons-vue注意：Vue3中图标是独立的组件，不再是字体文件。痛点：全局引入导致打包体积过大。方案：使用unplugin-vue-components。配置：在vite.config.js中配置解析器。效果：代码里直接写<el-button>，无需import。最佳实践：自动按需导入布局基础：Layout栅格系统概念：将一行分为24份。语法：<el-row>(行),<el-col:span="12">(列)。响应式：支持:xs,:sm,:md,:lg适配不同屏幕。<el-row>表示一行。<el-col:span="12">表示占12份（也就是一半宽度）。<el-col:span="8">表示占8份（三分之一宽度）。基础组件：Button&Icon按钮：<el-buttontype="primary">保存</el-button>Type:primary,success,danger,warning.图标：<el-icon><Edit/></el-icon>需要先注册或引入图标组件。数据展示核心：Table表格结构：<el-table:data="tableData">列定义：<el-table-columnprop="name"label="姓名"/>关键：prop属性对应后端JSON数据的字段名。复杂表格：自定义列模板场景：在表格里放按钮、图片或格式化状态。语法：使用插槽#default="scope"。代码：数据分页：Pagination场景：数据太多，需要分批加载。组件：<el-pagination>核心属性：v-model:current,v-model:size,:total。事件：@current-change(页码改变时触发)。三层结构：1.el-form(:model="form")2.el-form-item(label="用户名")3.el-input(v-model="")注意：model绑定对象是校验的关键。数据录入：Form表单表单校验：FormRules定义规则：construles={name:[{required:true,message:'必填'}]}绑定规则：<el-form:rules="rules">提交校验：formRef.value.validate(...)交互反馈：Message消息提示场景：操作成功/失败的提示。用法：JS调用，无需写在template里。代码：场景：新增/编辑弹窗。属性：v-model="dialogVisible"(控制显示隐藏)。插槽：#footer(放置“取消”和“确定”按钮)。模态窗口：Dialog对话框实战组合：标准CRUD页面结构后台CRUD页面顶部：用<el-row>放搜索框<el-input>和搜索按钮<el-button>。中间：放<el-table>展示数据列表。底部：放<el-pagination>进行翻页。隐藏：放一个<el-dialog>，里面包着<el-form>，用于新增和修改。这就是所有后台管理系统的“通用公式”。本节小结与作业小结：按需引入、Grid、Table、Form、Dialog。作