![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Element UI
文章平均质量分 54
crazybai0001
2005年毕业,之后一直从事计算机相关工作,目前从事前后端Web开发工作。
展开
-
使用popover实现下拉框效果
产品要求实现图中效果,整体看着像下拉框,每项内容分左右两部分,这种效果也可以使用select控件实现(插槽),但产品要求用户单击右侧的”查看“项时弹出对话框,单击左侧的文本(如 上游供气情况)时无任何交互,这种要求使用select的插槽未能实现,所以使用了popover实现此需求。原创 2023-03-31 16:54:31 · 759 阅读 · 0 评论 -
Element Table 单元格中嵌套表格(Table) 合并行效果
在Element中实现表格合并行功能一般是通过自定义span-method方法,此方法要求表格数据源中需要合并行的单元格中数据相同,根据相同数据来实现合并算法。本例通过在父Table单元格中嵌套子Table实现合并行效果(也使用了span-method方法),使用这种方法时需要将表格数据源构造成父子结构或者与后端沟通直接让接口返回父子结构数据,本例 中这种父子结构数据是由后端接口返回的,前端无需处理数据结构,直接使用即可。原创 2022-11-24 18:38:00 · 4851 阅读 · 4 评论 -
Element input输入框 限制输入数据规则
本文实现在VUE+Element环境下使用文本框时,限制文本框中输入数据格式的限制,使用的是el-input组件,将其type设置为了number,在配合在oninput中设置接收数据规则,实现了具体需求。原创 2022-11-09 18:16:23 · 14216 阅读 · 0 评论 -
修改ElementUI Select组件样式(不使用scoped)
本文讲解如何修改ElementUI组件的默认样式,修改默认样式的方法有几种,本文讲解在不使用scoped属性时如何修改组件默认样式,且不影响其他页面相同组件的样式。原创 2022-11-01 22:34:05 · 1142 阅读 · 0 评论 -
Element Datepicker 根据接口返回的多个日期数据禁用日期
日期范围选择器在后台管理系统中使用频率非常高,在有些需求需要禁用日期选择器的某个日期或某些连续的日期段,本文中需要禁用多个日期(可能是单个日期、也可能是多个连续日期,这多个日期是后端接口的,所以禁用的数量、禁用的日期值都不动态的,本文记录、分享这种情况的具体实现。原创 2022-10-31 20:39:39 · 1011 阅读 · 1 评论 -
Element Select选择器绑定对象,多选,回显处理
有些时候Select选择器需要多选、绑定对象,用户选择某项后(change事件),得到的值是一个对象,得到对象后可以获取对象的某些属性,以便做进一步处理,数据提交入库后,进行编辑操作,此时根据需求可能还需要正确定回显之前新建时选择的多个列表项,本文对些功能实现做简单整理、解释。原创 2022-10-28 19:19:08 · 14296 阅读 · 1 评论 -
Element Table 编写自定义指令实现单元格中文本框接收数据格式控制
比如有多个文件或多个位置使用了文件框(input),用户在向文本框中输入数据时,前端需要进行限制、控制,比如说只允许输入数值(不包含负数)、整数部分最多允许输入5位,小数部分最多允许输入5位、当输入的是以0开头,且第二位不是小数点的数据时,自动移除0(比如输入01,会自动变成1)。这种验证可能将来会在别的页面、模块中使用,所以考虑代码的复用、可维护、可移植、简洁,文中使用VUE全局指令实现这个需求。原创 2022-10-12 19:23:45 · 462 阅读 · 0 评论 -
Element 表单、表格中文本框提交时前端校验
在一个页面中即包含有表单元素(如下拉框、复选框等),也包含表格,在表格的单元格中放置有文本框,向接口提交整个页面数据前,需要前端校验表单和表格中中的文本框,本文讲解如何这种需求。有时页面中有多个按钮,比如有“保存”和“提交”两个按钮,单击保存时需要校验部分元素,单击提交时需要校验全部元素,这种需求的实现文中也有讲解。原创 2022-10-15 14:40:53 · 932 阅读 · 1 评论 -
Element Table 表格 自定义实现tooltip及隐藏过长文字
在Element Table中实现自定义的tooltip效果,当表格单元格中文本内容过长时会显示部分文本及省略号,鼠标放到单元格文本上时会出现自定义的tooltip提示原创 2022-10-12 18:57:35 · 5095 阅读 · 2 评论 -
Element Checkbox(复选框)样式自定义
根据产品、UI需求,需要修改Element中复选框的样式,本文中修改了选中状态、未选中状态下复选框的样式,使用样式穿透修改组件自身的样式,实现了预期需求。原创 2022-10-12 18:25:08 · 3998 阅读 · 0 评论 -
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 · 4402 阅读 · 1 评论 -
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 · 5667 阅读 · 0 评论 -
Element Progress组件 percentage值大于100时控制台报错
问题Progress组件的percentage值大于100时,浏览器控制台出现报错信息,请看下图:原因percentage值的类型要求是数值型,且其取值范围是[0,100],但有时真实的业务场景下,这个值可能会大于100,所以会出现上面的报错信息,下图是Progress组件关于percentage的说明:解决方法解决此问题的思路如下:判断接口返回的percentage值,如果大于100,则将其设置为100,否则保持原值; 使用format设置进度条右侧文本内容,使其..原创 2021-11-29 20:03:59 · 2024 阅读 · 0 评论