- 博客(21)
- 收藏
- 关注
RSS订阅原创 使用popover实现下拉框效果
产品要求实现图中效果，整体看着像下拉框，每项内容分左右两部分，这种效果也可以使用select控件实现（插槽），但产品要求用户单击右侧的”查看“项时弹出对话框，单击左侧的文本（如 上游供气情况）时无任何交互，这种要求使用select的插槽未能实现，所以使用了popover实现此需求。
2023-03-31 16:54:31
713
原创 浏览器中预览文件（pdf、图片文件）
本文讲解在浏览器中预览文件的具体实现，使用window.fetch请求文件资源，生成blob对象，创建此blob对象的url，使用生成的url在iframe中预览PDF文件，或通过img标签预览图片文件。
2023-03-31 16:30:42
1999
原创 Element Table 单元格中嵌套表格（Table） 合并行效果
在Element中实现表格合并行功能一般是通过自定义span-method方法，此方法要求表格数据源中需要合并行的单元格中数据相同，根据相同数据来实现合并算法。本例通过在父Table单元格中嵌套子Table实现合并行效果（也使用了span-method方法），使用这种方法时需要将表格数据源构造成父子结构或者与后端沟通直接让接口返回父子结构数据，本例 中这种父子结构数据是由后端接口返回的，前端无需处理数据结构，直接使用即可。
2022-11-24 18:38:00
4741
4
原创 Element input输入框 限制输入数据规则
本文实现在VUE+Element环境下使用文本框时，限制文本框中输入数据格式的限制，使用的是el-input组件，将其type设置为了number，在配合在oninput中设置接收数据规则，实现了具体需求。
2022-11-09 18:16:23
14072
原创 修改ElementUI Select组件样式（不使用scoped）
本文讲解如何修改ElementUI组件的默认样式，修改默认样式的方法有几种，本文讲解在不使用scoped属性时如何修改组件默认样式，且不影响其他页面相同组件的样式。
2022-11-01 22:34:05
1121
原创 Element Datepicker 根据接口返回的多个日期数据禁用日期
日期范围选择器在后台管理系统中使用频率非常高，在有些需求需要禁用日期选择器的某个日期或某些连续的日期段，本文中需要禁用多个日期（可能是单个日期、也可能是多个连续日期，这多个日期是后端接口的，所以禁用的数量、禁用的日期值都不动态的，本文记录、分享这种情况的具体实现。
2022-10-31 20:39:39
939
1
原创 Element Select选择器绑定对象，多选，回显处理
有些时候Select选择器需要多选、绑定对象，用户选择某项后（change事件），得到的值是一个对象，得到对象后可以获取对象的某些属性，以便做进一步处理，数据提交入库后，进行编辑操作，此时根据需求可能还需要正确定回显之前新建时选择的多个列表项，本文对些功能实现做简单整理、解释。
2022-10-28 19:19:08
14037
1
原创 接口入参格式为x-www-form-urlencoded 的处理
一般情况下接口入参数格式要求是JSON通用格式，但有些时候接口入参数要求是x-www-form-urlencoded格式，这种格式前端就不能传递JSON格式数据了，如果传递JSON数据的话，接口会报异常，本文对x-www-form-urlencoded格式入参做解释处理。
2022-10-22 14:42:05
5752
1
原创 Element 表单、表格中文本框提交时前端校验
在一个页面中即包含有表单元素（如下拉框、复选框等），也包含表格，在表格的单元格中放置有文本框，向接口提交整个页面数据前，需要前端校验表单和表格中中的文本框，本文讲解如何这种需求。有时页面中有多个按钮，比如有“保存”和“提交”两个按钮，单击保存时需要校验部分元素，单击提交时需要校验全部元素，这种需求的实现文中也有讲解。
2022-10-15 14:40:53
914
1
原创 Element Table 编写自定义指令实现单元格中文本框接收数据格式控制
比如有多个文件或多个位置使用了文件框（input），用户在向文本框中输入数据时，前端需要进行限制、控制，比如说只允许输入数值（不包含负数）、整数部分最多允许输入5位，小数部分最多允许输入5位、当输入的是以0开头，且第二位不是小数点的数据时，自动移除0（比如输入01，会自动变成1)。这种验证可能将来会在别的页面、模块中使用，所以考虑代码的复用、可维护、可移植、简洁，文中使用VUE全局指令实现这个需求。
2022-10-12 19:23:45
446
原创 Element Table 表格 自定义实现tooltip及隐藏过长文字
在Element Table中实现自定义的tooltip效果，当表格单元格中文本内容过长时会显示部分文本及省略号，鼠标放到单元格文本上时会出现自定义的tooltip提示
2022-10-12 18:57:35
4919
2
原创 Element Checkbox（复选框）样式自定义
根据产品、UI需求，需要修改Element中复选框的样式，本文中修改了选中状态、未选中状态下复选框的样式，使用样式穿透修改组件自身的样式，实现了预期需求。
2022-10-12 18:25:08
3821
原创 elementUI 日期选择器datepicker 设置禁用日期
经过上述分析可知_this.yearsArr.includes(year)的功能就是用日期选择器中的每个日期和[2021, 2022, 2023]匹配，如果日期选择器的某个日期存在于[2021, 2022, 2023]中，则返回true（此时这个日期显示为禁用状态），如果日期选择器的某个日期在[2021, 2022, 2023]中不存在，则返回false（此时日期选择器中的这个日期显示可用状态）。disabledDate(time)的参数item表示日期选择器中的生个日期（其值是日期型数据），
2022-09-04 17:26:22
4354
1
原创 flex布局，一行内显示4个元素，超出4个换行，右间距设置
.search-wrapper { /* flex布局，换行、左对齐 */ display: flex; justify-content: flex-start; flex-wrap: wrap; margin: 0 40rpx; position: absolute; top: 240rpx; left: 0; right: 0;}.city { font-size: 24rpx; background: #fff; border-radius: 20rpx; padding:
2022-07-03 12:05:04
25709
4
原创 elementui 文件上传
效果展示：模板代码：数据定义：handleFileUploadSuccessEvent方法：handleFileUploadExceedEvent方法：handleFileUploadRemoveEvent方法：handleFileUploadBeforeUploadEvent方法：
2022-05-11 21:25:03
197
1
原创 elementui 表格 动态生成多级表头 某些列未能显示、位置不对问题
我碰到的问题是由二级表头变成三级表头时，未出现问题，但由三级表头转变成二级表头时，出现了某些列未显示或位置不对的问题。解决方案
2022-05-11 20:56:45
1197
原创 CSS flex 左右两列布局 左侧列宽度自适应 右侧列宽度固定
需要实现的效果如下：右侧列内容宽度固定（110px），左侧列占满剩余宽度，左侧列宽度自适应。改变浏览器宽度后，左侧列仍旧自适应，右侧列固定110px。缩放浏览器百分比后，左侧列仍宽度仍旧自适应，右侧列宽度固定110px。实现代码：父容器设置flex横向布局，父容器中有两个子元素（左侧列、右侧列），左侧列的宽度使用calc动态计算【calc(100% - 11px)】，右侧列宽度固定为110px，这样就实现了本案例效果。...
2021-12-12 09:44:37
2424
原创 Select选择器 change 事件中传递自定义参数
默认情况下，Select组件change事件的参数是用户从下拉列表中选择的数据项，但有些情况下我们需要给change事件传递一些其他的自定义参数，实现方法如下： <el-form-item label="消息模板" prop="messageId"> <el-select v-model="formData.messageId" @change="(value) => handleMessageTemplateChangeEvent..
2021-11-29 20:37:46
5617
原创 Element Progress组件 percentage值大于100时控制台报错
问题Progress组件的percentage值大于100时，浏览器控制台出现报错信息，请看下图：原因percentage值的类型要求是数值型，且其取值范围是[0,100]，但有时真实的业务场景下，这个值可能会大于100，所以会出现上面的报错信息，下图是Progress组件关于percentage的说明：解决方法解决此问题的思路如下：判断接口返回的percentage值，如果大于100，则将其设置为100，否则保持原值； 使用format设置进度条右侧文本内容，使其..
2021-11-29 20:03:59
1968
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人