Vue3-ElementPlus 目录ElementPlus按需导入Icon图标导入组件中英文切换ElementPlus常见组件Layout布局Form表单表单校验自定义校验规则表单提交预校验Form Exposes重置表单行内表单表单组件多选组合日期选择器年份选择器和月份选择器联动禁用某些年份、月份或日期input输入框textarea文本域插槽自定义label消息提示Container 布局容器​编辑Menu菜单下拉菜单指令事件消息弹出框卡片表格序号自定义列Table插槽整行的点击事件设置当前选中行高亮颜色按钮加载空状态对话框Link链接分页抽屉上传单选框弹窗文件上传统计组件ElementPlus按需导入1.安装pnpm add element-plus全局导入import ElementPlus from element-plus import element-plus/dist/index.css app.use(ElementPlus)2.配置按需导入官方文档快速开始 | Element Plus按照官网按需导入中的自动导入步骤来进行pnpm add -D unplugin-vue-components unplugin-auto-import观察Vite代码与原vite文件的差别将原vite文件中没有的复制粘贴到合适的位置3.直接使用组件样式就是element-Plus的4.默认components下的文件也会被自动注册不需要再导入也能使用5.使用某组件时显示可能时安装的版本不够高需要安装组件所属版本的更高阶pnpm add element-pluslatest查看当前版本pnpm info element-plus versionIcon图标导入1.安装pnpm i element-plus/icons-vue官网参考 Icon 图标 | Element Plus2.使用先导入import { 图标名 } from element-plus/icons-vue在el-input输入框里使用el-input :prefix-iconLock/el-input组件中英文切换全局配置中文script setup import zhCn from element-plus/dist/locale/zh-cn.mjs /script template div !--App.vue只需要留一个路由出口router-view即可-- el-config-provider :localezhCn router-view/router-view /el-config-provider /div /templateElementPlus常见组件官方文档Button 按钮 | Element PlusLayout布局类似栅格网格系统el-row表示一行一行分成24份el-col在el-row中使用el-col表示列其中:spanx代表在一行中占x份:offsetx代表左侧margin的份数Form表单el-form为整个表单组件el-form-item为表单的一行其中labelxx设置行标签el-input加上show-password可以实现切换密码可见el-input typepassword show-password/el-input表单校验校验规则(1)在el-form上配置:modelruleFormRef绑定的是整个form的数据对象(2)在el-form上配置:rulesrules绑定的是整个rules规则对象(3)在el-form-item上配置propsname配置生效的是哪个校验规则和rules中的字段对应(4)表单元素上配置v-modelruleForm.name给表单元素绑定form的子属性label-width宽度控制前面标题的宽度方便后面的内容对齐不能写auto会控制台警告const formModel ref({ username: , password: , repassword: , telphone: }) //整个表单的校验规则 const rules { username: [ { required: true, //非空校验 message: 请输入用户名, //消息提示 trigger: blur //触发时机两个值blue表示失去焦点一般在input组件中使change为值改变一般在选择框中使用 }, { min: 5, //长度限制 max: 10, message: 用户名必须是5-10位的字符, trigger: blur } ], password: [ { required: true, message: 请输入密码, trigger: blur }, { pattern: /^\S{6,15}$/, //正则表达式 \S非空字符 message: 密码必须是6-15位的非空字符, trigger: blur } ], telphone: [ { pattern: /^[0-9]*$/, message: 请输入纯数字手机号码, trigger: blur } ] }切换页面例如语言切换会自动触发校验规则用户体验感差优化方法给el-form组件添加:validate-on-rule-changefalseel-form :modelruleForm :rulesrules :validate-on-rule-changefalse /el-form自定义校验规则validator: (rule, value, callback)(1)rule 当前校验规则相关的信息(2)value 所校验的表单元素目前的表单值(3)callback 无论成功还是失败都需要 callback 回调--callback()校验成功--callback(new Error(错误信息)) 校验失败默认是实时触发要修改成失焦触发const rules { repassword: [ { validator: (rule, value, callback) { if (value ! formModel.value.password) { callback(new Error(两次输入的密码不一致)) } else { callback() //校验成功也需要callback } }, trigger: blur } ] }表单提交预校验Form Exposes首先需要获取form组件script setup import { ref } from vue //获取dom元素 const form ref() /script template el-form refform/el-form /template为提交按钮添加点击事件registerconst register async () { //注册成功之前先进行校验校验成功-请求校验失败-自动提示 await form.value.validate() console.log(开始注册请求) }重置表单this.$refs.表单ref名.clearValidate()//移除整个表单的校验结果 this.$refs.表单ref名.clearValidate(prop属性)//移除某个prop属性的校验结果表单ref名.value.resetFields()//将表单的所有字段重置为初始值同时移除表单的校验结果注只会重置带有prop属性的项并且最外层el-form要绑定上v-model里面的每个小项也要和最外层v-model里的小项对应上表单需要先渲染出来才能使用有时候会显示报错dialogVisible.value控制子组件的显示在子组件打开时重置一下表单await nextTick()是等表单渲染完成后再触发下面的watch( () dialogVisible.value, async (val) { if (!val) return await nextTick() formRef.value?.resetFields() } )行内表单el-form inline/el-form表单组件多选组合const couponCheckList ref() el-checkbox-group v-modelcouponCheckList div v-forcoupon in couponListData.data.valid_coupons :keycoupon.coupon_code el-checkbox :checkedtrue :labelcoupon.coupon_code :valuecoupon.coupon_code changeisCheck true / /div /el-checkbox-group日期选择器el-date-picker v-modelapplyDate typedaterange range-separator到 start-placeholder开始日期 end-placeholder结束日期 :teleportedfalse value-formatYYYY-MM-DD /value-format设置存储的日期格式设置了这个之后v-model里存储的值也是对应的不然还需要修改格式format是设置在页面里显示的格式年份选择器和月份选择器联动el-form-item label年份 el-date-picker v-modelyear typeyear :teleportedfalse changehandleYearChange / /el-form-item el-form-item label月份 el-date-picker classmonthSelecter v-modelmonth typemonth :teleportedfalse formatMM changehandleMonthChange / /el-form-itemconst year ref() const month ref() const handleYearChange (value) { // 年份选择器选择后把年份赋值给月份选择器 if (value month.value) { const newDate new Date(month.value) // 复制当前日期对象 newDate.setFullYear(value.getFullYear()) // 设置新的年份 month.value newDate } } const handleMonthChange (value) { // 月份选择器选择后把年份赋值给年份选择器 if (value) { year.value String(value.getFullYear()) } }获取绑定年份选择器所选择的具体年份new Date(year.value).getFullYear()禁用某些年份、月份或日期禁用某些年份const disabledDate (time) { // 获取当前日期的年份 const year new Date(time).getFullYear() // 禁用2018年以前和明年后的年份 return year 2018 || year new Date().getFullYear() 1 } el-date-picker v-modelyear typeyear :teleportedfalse :disabled-datedisabledDate /只允许选择今天、昨天、前天const disabledDate (time) { // 获取今天的日期 const today new Date() // 设置时间为0点确保比较时不考虑时间部分 today.setHours(0, 0, 0, 0) // 获取昨天和前天的日期 const yesterday new Date(today) yesterday.setDate(today.getDate() - 1) const twoDaysAgo new Date(today) twoDaysAgo.setDate(today.getDate() - 2) // 如果日期不在今天、昨天和前天之内则禁用该日期 return ( time.getTime() today.getTime() || time.getTime() twoDaysAgo.getTime() ) }获取当年年份new Date().getFullYear()input输入框设置为只读但是可编辑disabled是不可编辑不可复制textarea文本域设置自适应高度设置autosize可根据文本高度自适应:autosize{ minRows: 0 }select选择器multiple多选collapse-tags多选时折叠除第一个的标签max-collapse-tags数量设置前几个数量的标签不折叠使用插槽自定义显示的内容显示所选择的value值也就是wh_codeel-select stylewidth: 450px v-modelformData.selectStore multiple :teleportedfalse el-option v-foritem in shopList :labelitem.wh_code item.code :valueitem.wh_code :keyitem.wh_code / template #label{ value } {{ value }} /template /el-select插槽自定义labelel-form-item label一级审批邮箱 propfirstEmail template v-slot:label div styledisplay: grid span styleline-height: 10px一级审批邮箱 /span span stylecolor: rgba(0, 0, 0, 0.45) (小区经理) /span /div /template el-input v-modelparams.firstEmail / /el-form-item消息提示ElMessage({ message: 成功, type: success, }) 或 ElMessage.success(成功)错误‘ElMessage’ is not defined.解决如果使用的是按需导入import ElMessage就会导致失效应该在.eslintrc.cjs文件中添加语句声明全局变量名globals: { ElMessage: readonly, ElMessageBox: readonly, ElLoading: readonly }Container 布局容器Menu菜单el-menu为整个菜单组件其中active-text-color代表选中时的颜色:default-active$route.path配置默认高亮的菜单项router开启就可以点击跳转写在el-menu-item的index中的路径el-menu-item为菜单项el-menu active-text-color#ffd04b background-color#232323 :default-active$route.path text-color#fff router el-menu-item index/article/channel el-iconManagement //el-icon span文章分类/span /el-menu-item el-menu-item index/article/manage el-iconPromotion //el-icon span文章管理/span /el-menu-item el-sub-menu index/user !--多级菜单的标题 - 具名插槽title-- template #title el-iconUserFilled //el-icon span个人中心/span /template !--展开的内容 - 默认插槽-- el-menu-item index/user/profile el-iconUser //el-icon span基本资料/span /el-menu-item el-menu-item index/user/avatar el-iconCrop //el-icon span更换头像/span /el-menu-item el-menu-item index/user/password el-iconEditPen //el-icon span重置密码/span /el-menu-item /el-sub-menu /el-menu下拉菜单指令事件消息弹出框import { ElMessageBox } from element-plusElMessageBox.confirm(你确认要进行退出么, 温馨提示, { type: warning, confirmButtonText: 确认, cancelButtonText: 取消, dangerouslyUseHTMLString: true//提示文字可以使用HTML样式比如使用换行符br/ })注意如果使用的是按需导入import ElMessage就会导致失效应该在.eslintrc.cjs文件中添加语句声明全局变量名globals: { ElMessage: readonly, ElMessageBox: readonly, ElLoading: readonly }点击取消或右上角×时控制台会弹出报错需要增加.catch语句ElMessageBox.confirm(你确认要进行退出么, 温馨提示, { type: warning, confirmButtonText: 确认, cancelButtonText: 取消 }) .then(() { }) .catch(() { })卡片template el-card classpage-container template #header div classheader span文件传送/span div classextra el-button typeprimary选择文件/el-button /div /div /template slot/slot /el-card /template style langscss scoped .page-container { min-height: 100%; box-sizing: border-box; .header { display: flex; justify-content: space-between; align-items: center; } } /style表格el-table-column是一列其中label是标题prop是去对象中找对应的属性做渲染width是宽度表格中数据不显示1绑定的数据是不是响应式的 2有没有加setup语法糖序号el-table-column lable序号 typeindex/el-table-column自定义列scope.row可以拿到行信息scope.row.属性名可以拿到某行信息里的scope.$index是下标或者函数传递参数el-table-column label操作 width150 template #default{ row, $index } el-button clickonEditChannel(row, $index) :iconEdit circle typeprimary plain /el-button el-button clickonDelChannel(row, $index) :iconDelete circle typedanger plain /el-button /template /el-table-column根据某列的值显示对应的内容el-table-column label申请状态 propstatus template #default{ row } !-- 使用 v-slot 语法 -- span v-ifrow.status 0未审批/span span v-else已重启/span /template /el-table-columnTable插槽template #empty暂无数据/template整行的点击事件row-clickhandleRowClickconst handleRowClick (row, column, event) { console.log(行点击事件触发, row); const rowIndex 表格数组.indexOf(row) // 使用indexOf获取行数据在数组中的位置 console.log(所点击的行的index, rowIndex) };双击事件row-dblclickRowDbclick const RowDbclick (row) {}如果在表格中增加操作栏触发点击事件会和这个功能冲突那么可以这样写点击事件click.stop设置当前选中行高亮颜色在表格里添加以下代码:highlight-current-rowtrue设置选中某一行table表格的ref值.setCurrentRow(table关联的数据表[行数])获取选中的行信息el-table refsingleTableRef/el-table const singleTableRef ref(null); let row singleTableRef.value.store.states.currentRow.value;设置高亮的颜色//修改表格所选中的行的高亮颜色 :deep(.el-table__body tr.current-row td) { background: var(--el-color-warning-light-9) !important; }格式化数字显示const formatNumber (row, column) { return Math.floor(row[column.property]) .toString() .replace(/\B(?(\d{3})(?!\d))/g, ,) // 不保留小数且增加千分位格式 } el-table-column label员工目标 proptarget :formatterformatNumber /el-table-column实现默认排序以code列升序排列el-table :default-sort{ prop: code, order: ascending } /el-tableascending升序或descending降序按钮type控制颜色plain控制镂空效果round和circle控制形状keydown.enter.prevent//禁用按钮回车触发 keydown.space.prevent//禁用按钮空格触发:loading变量//实现加载样式加载v-loadingtrue空状态el-empty description没有数据/el-empty对话框Link链接el-link.../el-link分页页码组件v-model:current-page代表当前页码v-model:page-size代表每页条数:page-sizes可供用户选择的每页条数注意要包含当前设置的每页条数,layout代表菜单栏顺序和个数都是一一对应的size-change每页条数变化时触发的事件current-change当前页变化时触发的事件更新Element Plus 已废弃size-change、current-change改为使用changetotal的值一定要为数字类型不然控制台会报错total.value Number(变量) || 0抽屉v-model控制显示与隐藏:direction控制方向默认从右往左size控制大小上传action配置了后台接口地址请求方式为post请求参数namefile可以通过下面的API修改默认配置:on-change控制上传事件const onSelectFile (uploadFile) { console.log(图片链接,uploadFile.raw) }js控制显示上传上传组件ref.$el.querySelector(input).click()单选框v-model双向绑定数据value单向获取选项数据不能修改修改选项使用input弹窗出现弹窗闪现一下立刻消失的问题解决方法增加一个setTimeout延时setTimeout(() { this.$confirm(此操作将会清空原有数据, 是否继续?, 提示, { confirmButtonText: 确定, cancelButtonText: 取消, type: warning }).then(() { //确定后执行 }).catch(() { //取消后执行 }); }, 200)文件上传使用el-upload做了一个只允许上传一份excel文件的组件并且上传新的文件会覆盖原文件script setup import { UploadFilled } from element-plus/icons-vue import { ref } from vue const dialogVisible ref(false) const title ref() const isEdit ref(false) const uploading ref(true) const fileList ref([]) const open async (t, s) { dialogVisible.value true //显示抽屉 title.value t isEdit.value s } //上传文件组件发生变化时 const handleChange (file) { if (!isXLSXCSV(file.name)) { ElMessage({ message: 仅允许上传excel/csv文件, type: warning }) fileList.value [] return } uploading.value false fileList.value [file.raw] } //移除文件时 const handleRemove () { uploading.value true fileList.value [] } //超出最大文件数时 const handleExceed (file) { if (!isXLSXCSV(file[0].name)) { ElMessage({ message: 仅允许上传excel/csv文件, type: warning }) return } ElMessage({ message: 仅允许上传一份文件,已覆盖原文件, type: warning }) fileList.value [file[0]] } const onSubmit () {} const isXLSXCSV (link) { return /.xlsx$/.test(link) || /.csv$/.test(link) } defineExpose({ open }) /script template el-dialog v-modeldialogVisible :titletitle width50% el-upload refuploadrefss :file-listfileList action# accept.xlsx,.csv classupload-demo drag :limit1 :auto-uploadfalse :on-changehandleChange :on-removehandleRemove :on-exceedhandleExceed el-icon classel-icon--uploadupload-filled //el-icon div classel-upload__text拖拽文件至这里或 em点击上传/em/div template #tip div classel-upload__tip 限制一份excel/csv文件下一个文件会覆盖上一个文件 /div /template /el-upload template #footer span classdialog-footer el-button clickdialogVisible false color#A88D5B plain 取消/el-button el-button typeprimary clickonSubmit color#A88D5B stylecolor: white :disableduploading 确认导入 /el-button /span /template /el-dialog /template style .el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close { color: #7e6934 !important; } /style统计组件显示到小数点后两位const formatter (value) { return value.toFixed(2) } el-statistic title超出预期(%) :value变量 :formatterformatter /