19-Vue2 与 Element UI 组件库实战

Vue2 与 Element UI 组件库实战Element UI 是 Vue 2 生态中最流行的桌面端组件库。本章将系统讲解 Element UI 的核心组件使用、主题定制、表单封装以及常见业务场景的最佳实践。一、前言Element UI 提供了 50 高质量组件覆盖后台管理系统开发中的常见需求Element UI基础组件表单组件数据展示导航组件反馈组件Button/IconLayoutInput/SelectForm/TableDatePickerTablePaginationTreeMenu/TabsBreadcrumbDialog/DrawerMessage/Loading二、安装与配置2.1 安装# 完整引入npminstallelement-ui-S# 按需引入推荐npminstallelement-ui-Snpminstallbabel-plugin-component-D2.2 完整引入// main.jsimportVuefromvue;importElementUIfromelement-ui;importelement-ui/lib/theme-chalk/index.css;Vue.use(ElementUI,{size:small,zIndex:3000});2.3 按需引入// babel.config.jsmodule.exports{plugins:[[component,{libraryName:element-ui,styleLibraryName:theme-chalk}]]};// main.jsimport{Button,Input,Form}fromelement-ui;Vue.use(Button);Vue.use(Input);Vue.use(Form);三、核心组件实战3.1 表单封装template el-form refform :modelformData :rulesrules label-width100px el-form-item label用户名 propusername el-input v-modelformData.username placeholder请输入用户名 / /el-form-item el-form-item label邮箱 propemail el-input v-modelformData.email typeemail / /el-form-item el-form-item label角色 proprole el-select v-modelformData.role placeholder请选择 el-option label管理员 valueadmin / el-option label用户 valueuser / /el-select /el-form-item el-form-item label状态 el-switch v-modelformData.status active-valueactive inactive-valueinactive / /el-form-item el-form-item el-button typeprimary clicksubmit提交/el-button el-button clickreset重置/el-button /el-form-item /el-form /template script export default { data() { return { formData: { username: , email: , role: , status: active }, rules: { username: [ { required: true, message: 请输入用户名, trigger: blur }, { min: 3, max: 20, message: 长度 3-20, trigger: blur } ], email: [ { required: true, message: 请输入邮箱, trigger: blur }, { type: email, message: 邮箱格式错误, trigger: blur } ] } }; }, methods: { submit() { this.$refs.form.validate(valid { if (valid) { this.$emit(submit, this.formData); } }); }, reset() { this.$refs.form.resetFields(); } } }; /script3.2 表格封装template div el-table v-loadingloading :datatableData border stripe selection-changehandleSelectionChange el-table-column typeselection width55 / el-table-column propname label名称 min-width150 / el-table-column propstatus label状态 width100 template slot-scope{ row } el-tag :typerow.status active ? success : danger {{ row.status }} /el-tag /template /el-table-column el-table-column label操作 width180 fixedright template slot-scope{ row } el-button sizemini clickedit(row)编辑/el-button el-button sizemini typedanger clickremove(row)删除/el-button /template /el-table-column /el-table el-pagination :current-pagepage :page-sizes[10, 20, 50] :page-sizepageSize :totaltotal layouttotal, sizes, prev, pager, next size-changehandleSizeChange current-changehandlePageChange / /div /template3.3 Dialog 弹窗封装template el-dialog :titletitle :visible.syncvisible :before-closehandleClose width600px slot / template #footer el-button clickvisible false取消/el-button el-button typeprimary :loadingloading clickconfirm确定/el-button /template /el-dialog /template script export default { props: { title: String, loading: Boolean }, data() { return { visible: false }; }, methods: { open() { this.visible true; }, close() { this.visible false; }, confirm() { this.$emit(confirm); }, handleClose(done) { this.$confirm(确认关闭).then(() done()); } } }; /script四、主题定制4.1 在线主题工具# 安装主题工具npminstallelement-theme-gnpminstallelement-theme-chalk-D# 初始化变量文件et-i# 修改变量 element-variables.scss$--color-primary:#42b983;$--color-success:#67c23a;# 编译主题et4.2 局部覆盖样式// styles/element-variables.scss /* 改变主题色 */ $--color-primary: #42b983; /* 按需引入 */ import ~element-ui/packages/theme-chalk/src/button;五、常见业务场景5.1 可搜索下拉表格template el-select v-modelselected filterable remote :remote-methodfetchData :loadingloading el-option v-foritem in options :keyitem.id :labelitem.name :valueitem.id / /el-select /template5.2 图片上传template el-upload action/api/upload :headers{ Authorization: token } :before-uploadbeforeUpload :on-successhandleSuccess :file-listfileList list-typepicture-card i classel-icon-plus / /el-upload /template六、总结组件关键属性注意事项Formrules, model每个表单项必须有 propTabledata, column大数据使用虚拟滚动Dialogvisible, before-close使用 .sync 或 v-modelSelectfilterable, remote远程搜索需防抖Uploadaction, before-upload注意跨域和权限七、练习封装一个通用搜索表单组件支持动态配置表单项封装一个可配置列的表格组件使用 Element UI 搭建一个完整的后台管理页面自定义主题色并应用到项目中