![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
ElementUI
文章平均质量分 93
霸道流氓气质
每一个优秀的人,都有一段沉默的时光,(项目合作请留言)是那段时光,不抱怨不诉苦,最后渡过了这段感动自己的日子。
展开
-
ElementUI中el-upload中怎样限制上传文件的格式
场景使用el-upload上传文件时限制只能上传指定格式的文件。比如这里只允许上传apk格式的文件。注:博客:https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现通过添加accept=".apk"来添加打开时的默认类型 <el-upload :headers="headers" :action="url"...原创 2020-12-03 21:15:31 · 3730 阅读 · 1 评论 -
ElementUI中使用el-calendar实现基于日历的节假日的增删改查
场景前端使用ElementUI的el-calendar组件实现可视化的节假日的增删改查。主页面显示效果如下点击日历组件上的某天进行新增节假日时点击已经存在的节假日编辑时博客:https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现首先el-calendar是支持自定义内容的,官方文档地址:https://element.eleme.cn/#/zh-...原创 2020-10-27 11:24:49 · 6856 阅读 · 4 评论 -
ElementUI中弹窗使用textarea原样显示SpringBoot后台带换行的StringBuilder内容
场景前端进行导入Excel后,后台SpringBoot将导入结果进行反馈。后台代码使用的是StringBuilder拼接一个带换行\n的回显内容。然后在导入结束后前端怎样使用ElementUI的弹窗将反馈结果包括换行原样显示。注:博客:https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现前端调用结果收到的msg信息为 // 文件上传成功处理...原创 2020-10-26 11:25:40 · 728 阅读 · 0 评论 -
ElementUI中对el-table的某一列的时间进行格式化
场景前端使用el-table查询到后台的数据的某一列时间列默认是标准UTC格式,如果想按照自己想显示的格式获取年月日和时分秒进行显示怎么办。注:博客:https://blog.csdn.net/badao_liumang_qizhi关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现在此列上添加template,显示的内容调用函数parseDateFull,参数为后台返回的时间。 <el-table-column ...原创 2020-10-21 14:17:01 · 1340 阅读 · 0 评论 -
SpringBoot+El-upload实现上传文件到通用上传接口并返回文件全路径(若依前后端分离版源码分析)
场景SpringBoot+ElementUI实现通用文件下载请求(全流程图文详细教程):https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107983093在使用了通用下载接口下载一些文件后,有些业务比如上传头像,富文本上传照片,此类业务都需要将某些文件上传到服务器上,并返回该文件的全路径,给具体的业务前端返回,进行回显数据或下载文件用。同时为了后期文件数量过多,最好是按照时间在服务器上新建不用的文件夹,并且给上传的文件的原创 2020-09-03 15:12:23 · 4981 阅读 · 2 评论 -
ElementUI中el-form实现表单重置以及将方法抽出为全局方法
场景使用el-form时,点击重置按钮或者取消按钮时会实现表单重置效果。那么el-form怎样实现表单重置,如果在多个页面需要用到重置,怎样将此方法抽出为全局的方法,在需要用到的地方直接引用。注:博客:https://blog.csdn.net/badao_liumang_qizhi关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现实现重置首先给el-form添加ref属性。 <el-form :model="queryParams" ref=.原创 2020-08-31 09:31:27 · 3250 阅读 · 0 评论 -
若依前后端分离版实现基于el-tree实现选中部门树节点同步选中多选框的操作
场景ElementUI中el-tree控件封装公共控件(部门列表)并请求后台数据获取父子级数据并构建成前端数据结构数据:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107862515在上面已经实现的部门多选树的效果为现在要实现的效果为,鼠标单击树节点时直接能实现点击左边的勾选框的效果。即不用点击勾选框则能直接实现勾选效果,提高用户体验,具体效果如下注:博客:https://blog.csd..原创 2020-08-28 14:55:49 · 1829 阅读 · 0 评论 -
ElementUI中el-time-picker实现选择时间并格式化显示和传参的格式
场景要实现在前端选择一个一天中的时间并传递到后端。实现效果如下注:博客:https://blog.csdn.net/badao_liumang_qizhi关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现 <el-form-item label="打卡时间" prop="dksj"> <el-time-picker v-model="form.dksj" format = 'HH:m...原创 2020-08-24 10:46:41 · 20390 阅读 · 0 评论 -
ElementUI中el-table-column的type为selection时选择框旁边有个点
场景使用el-table的多选框时,el-table-column的type为selection时,显示为勾选框。但是会在勾选框旁边显示一个实心的小点。注:博客:https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现这是因为在设置el-table-column的宽度为30后太窄的原因。<el-table-column type="selection" widt..原创 2020-08-23 15:03:17 · 4885 阅读 · 0 评论 -
ElementUI中el-table设置指定列固定不动,不受滚动条影响
场景使用el-table显示人员信息时,如果要显示的人员信息列比较多,就会出现滚定条。如果希望前面指定的像工号、姓名等字段不用显示的话,可以设置指定列固定不动。实现效果如下注:博客:https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现只需要在固定不动的列添加fixed属性即可。 <el-table-column label="姓名" al...原创 2020-08-21 09:55:36 · 10306 阅读 · 0 评论 -
ElementUI中el-table添加小计行之后调整在滚动条上方
场景找到要添加汇总行小计行的el-table<el-table v-loading="loading" :data="kqtjList" show-summary="true">设置shoe-summary为true但是如果列比较多有滚动条出现的话就会出现上面那种合计行在滚动条注:博客:https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现解决办法..原创 2020-08-19 11:59:38 · 1355 阅读 · 1 评论 -
ElementUI中el-table在表格最下方添加一列汇总小计行
场景el-table中的每列显示的是数字,需要在表格的最下面一行添加汇总行,计算每列的总和。el-table自带是否显示汇总行这个属性。注:博客:https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现属性声明如下找到要添加汇总行小计行的el-table<el-table v-loading="loading" :data="kqtjList" show-s..原创 2020-08-19 11:38:31 · 6077 阅读 · 0 评论 -
ElementUIz中el-checkbox-group多选框组的使用,怎样设置一组选项与获取所选值
场景最终实现的效果checkbox-group元素能把多个 checkbox 管理为一组,只需要在 Group 中使用v-model绑定Array类型的变量即可。el-checkbox 的 label属性是该 checkbox 对应的值,若该标签中无内容,则该属性也充当 checkbox 按钮后的介绍。label与数组中的元素值相对应,如果存在指定的值则为选中状态,否则为不选中。官方示例代码<template> <el-checkbox-group ..原创 2020-08-18 14:06:45 · 6684 阅读 · 1 评论 -
SpringBoot+ElementUI实现多选设置一月中指定几天的属性,SpringBoot中通过反射实现
场景在某管理系统中,需要对指定员工的指定月份的指定天设置为指定的状态注:博客:https://blog.csdn.net/badao_liumang_qizhi关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现首先设计数据库依次添加d1到d31代表每月的1到31号,设置类型为varchar,存储的是字符串类型。然后生成相应的实体类和各业务层代码,实体类属性如下然后在前端,选择某条记录点击修改时 &...原创 2020-08-18 11:25:57 · 392 阅读 · 0 评论 -
SpringBoot+ElementUI实现通用文件下载请求(全流程图文详细教程)
场景在某些场景下需要前端浏览器从服务器端下载文件,比如需要下载导入Excel的模板。注:博客:https://blog.csdn.net/badao_liumang_qizhi关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现既然是实现通用下载接口,就要实现在后端配置一个下载文件的路径,在前端进行下载请求时传递要下载的文件的名字,然后请求公共接口进行下载。首先是在前端使用ElementUI的el-link添加一个下载链接 <...原创 2020-08-14 08:29:18 · 3622 阅读 · 0 评论 -
ElementUI中el-upload传递额外参数为date类型时后台SpringBoot接收不到
场景ElementUI中el-upload怎样上传文件并且传递额外参数给Springboot后台进行接收:https://mp.csdn.net/console/editor/html/107979828上面讲了怎样使用el-upload控件传递给后台进行接收。可以看到el-upload传递额外的参数时使用的data格式为:data="{updateSupport:upload.updateSupport,lxyf:upload.lxyf}"其中upload.updateSuppo原创 2020-08-13 15:21:46 · 1740 阅读 · 0 评论 -
ElementUI中el-upload怎样上传文件并且传递额外参数给Springboot后台进行接收
场景需要将Excel中的数据导入到数据库中,就会用到文件上传的功能。这里使用ElementUI的el-upload控件实现文件上传。注:博客:https://blog.csdn.net/badao_liumang_qizhi关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现首先在页面上添加一个el-upload控件 <el-upload ref="upload" :limit="1"...原创 2020-08-13 14:57:01 · 10759 阅读 · 0 评论 -
SpringBoot+MyBatis+ElementUI中对于时间格式化问题的处理
场景在管理系统中,时间的存储、查询、显示的格式往往需要统一。这就涉及到在数据库中存储时间,使用Mybatis对时间进行比较查询,使用Springboot中的实体类存储查询时间,使用前端时间选择器,这里是ElementUI的时间选择器。注:博客:https://blog.csdn.net/badao_liumang_qizhi关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现首先是数据库中表的设计,关于时间字段,设计为Date类型数据库中对于时间.原创 2020-08-13 14:01:23 · 741 阅读 · 1 评论 -
ElementUI中el-radio-group使用v-model绑定是属性为String字符串类型时不回显数据
场景结合el-radio-group元素和子元素el-radio可以实现单选组,在el-radio-group中绑定v-model,在el-radio中设置好label即可,无需再给每一个el-radio绑定变量,另外,还提供了change事件来响应变化,它会传入一个参数value。官方示例代码:<template> <el-radio-group v-model="radio"> <el-radio :label="3">备选项</el-...原创 2020-08-13 11:44:27 · 7220 阅读 · 0 评论 -
ElementUI中el-select下拉框选择不同的项控制其他控件(单选控件)的显示和隐藏
场景在el-select的下拉框中,下拉选择指定的下拉项时才会显示后面的单选框,否则不显示。效果如下注:博客:https://blog.csdn.net/badao_liumang_qizhi关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现首先在页面中添加这两个控件 <el-row> <el-col span="10"> <el-form-item labe...原创 2020-08-13 11:24:21 · 4729 阅读 · 2 评论 -
EelemntUI中e-form表单校验的使用以及表单校验的规则
场景Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。官方示例代码<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name"> <el...原创 2020-08-13 10:46:53 · 2194 阅读 · 0 评论 -
ElementUI中el-table双击单元格事件并获取指定列的值和弹窗显示详细信息
场景双击el-table的某个单元格时获取此单元格的信息并弹窗显示其他关联的信息。效果如下注:博客:https://blog.csdn.net/badao_liumang_qizhi关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现首先给el-table设置cell-dblclick事件 <el-table v-loading="loading" :data="kqryszList"...原创 2020-08-13 10:25:57 · 9453 阅读 · 0 评论 -
ElementUI中的el-select中多选回显数据后没法重新选择和更改
场景ElementUI的el-select怎样实现下拉多选并实现给下拉框赋值和获取值:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107838848上面已经实现在编辑时给v-model绑定的数组重新赋值,这样多选框能实现回显数据。但是没法再次对下拉框的内容进行更改,去掉原来的或者勾选新的都不可以。注:博客:https://blog.csdn.net/badao_liumang_qizhi关注公众号霸.原创 2020-08-10 14:54:45 · 4967 阅读 · 13 评论 -
ElementUI中el-tree控件封装公共控件(部门列表)并请求后台数据获取父子级数据并构建成前端数据结构数据
场景在人员管理系统中,有不少页面需要选择目前的部门树形结构中的部门进而作为筛选条件进行查询。怎样借助ElementUI的el-tree控件封装成公共控件并请求SpringBoot后台数据获取部门数据并封装成前端需要的树形结构数据。注:博客:https://blog.csdn.net/badao_liumang_qizhi关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现前端实现首先在项目下新建components目录存放公共组件,在目录下新建Lef.原创 2020-08-07 15:04:13 · 2334 阅读 · 1 评论 -
ElementUI中Transfer穿梭框的使用、赋值取值进而实现新增和编辑功能
场景要实现的效果如下这里用到了ElemrntUI的Transfer穿梭框控件官方示例代码<template> <p style="text-align: center; margin: 0 0 20px">使用 render-content 自定义数据项</p> <div style="text-align: center"> <el-transfer style="text-align: left...原创 2020-08-07 10:57:28 · 13399 阅读 · 3 评论 -
EleemntUI中el-table的formatter格式化字典显示的使用
场景某些类似于用字典(键值对)存储的属性,比如操作员这种1代表用户id 数组库存储的也是用户id,但是在页面上展示的是用户姓名数据库中存储czy是数字即用户的id而要在页面上展示的是用户姓名注:博客:https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现一般这种都是在后台写sql语句时使用关联语句关联查询用户表将用户姓名查询出来。但是这只是用户id和姓..原创 2020-08-07 08:59:47 · 2557 阅读 · 0 评论 -
ElementUI中el-select请求springboot后台数据显示下拉项并在el-table中格式化显示
场景Vue+ElementUI+axios+SpringBoot前后端分离的后台管理系统。将表格中某字段类似于状态等需要关联字典表进行筛选查询时。示例如下注:博客:https://blog.csdn.net/badao_liumang_qizhi关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现首先实现前端页面下拉框赋值在页面上添加一个el-table <el-form-item label="调动类别" prop="...原创 2020-08-06 17:52:00 · 3338 阅读 · 2 评论 -
ElementUI的el-select怎样实现下拉多选并实现给下拉框赋值和获取值
场景要实现的效果如下官方示例代码实现多选为el-select设置multiple属性即可启用多选,此时v-model的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现,你也可以设置collapse-tags属性将它们合并为一段文字。<template> <el-select v-model="value1" multiple placeholder="请选择"> <el-option v-for="it...原创 2020-08-06 14:36:59 · 22185 阅读 · 0 评论 -
ElementUI中的el-table怎样实现每一列显示的是控件并能动态实现双向数据绑定
场景要实现在ElementUI的表格中每一列展示的不是数据而是控件。效果如下注:博客:https://blog.csdn.net/badao_liumang_qizhi关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现普通表格官方示例代码<template> <el-table :data="tableData" stripe style="width: 100%"> <el-tabl...原创 2020-08-06 13:48:32 · 1944 阅读 · 2 评论 -
ElementUI中的el-table怎样实现绑定对象数组时每一列不同控件的动态数据绑定
场景ElementUI中的el-table中实现动态添加一行、删除一行、清空所有行:https://mp.csdn.net/console/editor/html/107815187 上面实现的效果如下其中每一行都是动态添加的,每一行对应的是一个对象,每一列对应的是一个对象的属性。所以整个el-table绑定的数据源就是一个对象的数组。但是在页面上实现时怎样实现每一列的动态数据绑定。首先添加一个el-table <el-table...原创 2020-08-05 16:26:27 · 7122 阅读 · 0 评论 -
ElementUI中的el-table实现递增的序号列
场景ElementUI中的el-table中实现动态添加一行、删除一行、清空所有行:https://mp.csdn.net/console/editor/html/107815187在上面中能实现动态添加一行并实现序号递增的效果。这里记录下递增序号是怎样实现的。注:博客:https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现首先新增一个el-table,并添加一列序号.原创 2020-08-05 15:04:10 · 1617 阅读 · 2 评论 -
ElementUI中的el-table中实现动态添加一行、删除一行、清空所有行
场景效果如下注:博客:https://blog.csdn.net/badao_liumang_qizhi关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现首先页面添加一个el-table,然后绑定其数据源为bcglXiangXiList,并且通过<el-table-column type="selection" width="30" align="center" />添加了勾选框。然后通过@selection-change=".原创 2020-08-05 14:52:10 · 5930 阅读 · 0 评论 -
ElementUI中的el-table实现多选框不勾选的提示
场景ElementUI中的el-table怎样实现多选与单选:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107769640在上面实现多选和单选的基础上,实现如果不勾选就点击某按钮时给予提示。注:博客:https://blog.csdn.net/badao_liumang_qizhi关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现首先在页面上添加多选或者单选框...原创 2020-08-04 08:44:55 · 1448 阅读 · 0 评论 -
ElementUI中的el-table怎样实现多选与单选
场景实现多选非常简单: 手动添加一个el-table-column,设type属性为selection即可。多选效果单选效果注:博客:https://blog.csdn.net/badao_liumang_qizhi关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现实现多选在el-table中添加一个el-table-column 设置类型为selection即可 <el-table v-loading="l...原创 2020-08-03 17:37:18 · 11682 阅读 · 5 评论 -
ElementUI中使用el-time-picker向SpringBoot传输24小时制时间参数以及数据库中怎样存储
场景前端需要获取24小时制的时间参数并传递到后台存储到数据库。在数据库中存储的是注:博客:https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现首先前端使用ElemetUI的el-time-picker时间范围选择控件。官方示例代码<template> <el-time-picker is-range v-model...原创 2020-07-30 17:47:37 · 2264 阅读 · 0 评论 -
Vue中实现清空数组和清空el-table
场景要实现的效果是那么就要用到怎样将这个el-table清空,即在vue中怎样将数组清空。注:博客:https://blog.csdn.net/badao_liumang_qizhi关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现首先将这个el-table与一个数组实现双向绑定 <el-table v-loading="loading" :data="bcglXiangXiList"...原创 2020-07-30 17:16:03 · 10549 阅读 · 0 评论 -
ElementUI中显示是否以及SpringBoot中怎样存储实体类属性和数据库怎样设计字段
场景Vue+ElementUI+SpringBoot+Mysql需要设计一些属性为是否,即只有两个选择的属性字段。注:博客:https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现首先设计Mysql数据库,此字段设计为长度为1的tinyint然后在SpringBoot中的实体类中private Boolean sfkt;将其设置为Boolean这样在使用代..原创 2020-07-30 10:19:05 · 288 阅读 · 0 评论 -
ElementUI中的el-form怎样格式化显示1和0为是和否
场景某些字段代表是否怎样。数据库中存储的是int型的1和0。从数据中取出来的也是1和0。怎样将其格式化为是和否注:博客:https://blog.csdn.net/badao_liumang_qizhi关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现<el-table-column label="是否跨天" align="center" prop="sfkt" :formatter="sfktFormate" />添加formatte原创 2020-07-30 09:42:02 · 1656 阅读 · 0 评论 -
ElementUI的el-form怎样格式化布局
场景如果使用el-form默认的布局代码如下:<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="密码" prop="pass"> <el-input type="password" v-model="ruleForm.pass" autocom...原创 2020-07-30 08:50:19 · 3431 阅读 · 0 评论 -
ElementUI的el-table怎样隐藏某一列
场景使用el-table进行数据的展示时,某些列不需要展示,但是需要其存在。比如查询数据时要获取对象的ID属性,在展示时不需要展示ID这一列,但是在进行编辑时需要获取该ID。注:博客:https://blog.csdn.net/badao_liumang_qizhi关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现可以通过在el-table-column上添加v-if="false"来实现完整示例代码 <el-table v-...原创 2020-07-29 17:47:23 · 38036 阅读 · 7 评论