elementUi 组件封装
文章平均质量分 91
分享一些 工作需求 比较痛点难点的 elementUi 组件二次封装案例!
技术宅小温
一个正在成长路上的前端技术宅,希望大家多多沟通交流技术! 共同进步!
展开
-
< vue + ElementUi 组件封装:实现弹窗展示富文本数据,允许全文搜索高亮显示搜索内容 >
在 Vue + elementUi 开发中,遇到需要实现一个富文本展示 且 需要实现富文本全文搜索,高亮对应搜索内容。显示关键词出现次数,允许上下按顺序切换,实现滚动条定位到对应关键词位置!接下来,简单阐述下,开发中使用方法!话不多说,先上效果图! 白嫖万岁!当然,如果有帮助,希望不要吝啬你的点赞呀!原创 2023-06-29 17:20:13 · 5341 阅读 · 1 评论 -
< ElementUi组件库: el-progress 进度条Bug及样式调整 >
在 Vue + elementUi 开发中,在使用Progress进度条时,往往会因为需求原型太过花里胡哨而烦恼(原本的样式并不能满足需求)。为什么呢?因为这个组件elementUi并没有提供过多的自定义属性及插槽,对的,插槽也没有,不能自定义进度条文本样式。即使在elementUi的文档里面写了属性,但是实际使用并未生效(怀疑是bug)。Tips: 基于 elementUi来说,好像elementUi - Plus升级了,修复了bug,也增加了对应的属性、开放了插槽!原创 2023-05-25 18:37:47 · 7987 阅读 · 1 评论 -
<组件封装:Vue + elementUi 通过excel文件实现 “ 批量导入 ” 表单数据,生成对应新增信息 >
在 Vue + elementUi 开发中,当某些新增表单数据过多时,为了提高新增数据的效率,往往会需要实现批量新增的功能。为此,我们就需要封装一个批量新增弹窗的功能组件,因实际场景需要,本次封装的批量导入组件,涵盖附件上传功能,组件仅以抛砖引玉! 需要按照实际应用场景进行调整!👉 三、效果演示🔥 < 每日小技巧: 基于Vue状态的过渡动画 - Transition 和 TransitionGroup>🔥 < 每日份知识快餐:axios是什么?如何在Vue中 封装 axio原创 2023-05-19 19:03:29 · 1788 阅读 · 1 评论 -
< elementUi组件封装: 通过 el-tag、el-popover、vue动画等实现公告轮播 >
在 Vue + elementUi 开发中,遇到这么一个需求,要实现公告轮播的效果。说实话,一开始是打算通过Javascript去获取并修改对应元素来控制轮播的,但是发现这样子代码比较多,而且性能不是很好。然后…聪明的小温想到了,能不能通过vue的动画过渡,实现公告的滚动效果呢!一不做二不休,直接上手,果然是可以实现的!接下来,简单阐述下,开发中使用方法!tipsvue动画过渡 - Transition 官方文档。原创 2023-04-22 10:00:00 · 2387 阅读 · 0 评论 -
< elementUI组件样式及功能补全: 实现点击steps组件跳转对应步骤 >
在 Vue + elementUi 开发中,elementUI中steps步骤条组件只提供了change方法,并未提供各个步骤的点击跳转方法。在实际项目使用中,如果步骤条并非一步一步进行,而是有步骤跳转。那么就需要自己去自定义DIY了。接下来,简单阐述下,开发中使用方法!原创 2023-02-23 18:29:47 · 5009 阅读 · 5 评论 -
< elementUi 组件插件: el-table表格拖拽修改列宽及行高 及 使用注意事项 >
由于项目需求,需要给定原先使用的element列表新增一个列宽动态拖拽功能。结合在网上找到的资源,出一期 “ 使用事项 ” 及 使用过程中的问题汇总原创 2023-02-17 14:44:49 · 10728 阅读 · 6 评论 -
< 在element-ui中: 使用el-tree + el-table组件,联动请求用户数据表格组件 (基础版,后续可能更新) >
在 Vue + elementUi 开发中,实现通过树状组织机构,点击查询用户信息联动效果! 组件较为简单,可以直接嵌入到需要使用的位置,具体操作还得看各位大佬如何使用! 纯记录!话不多说,先上效果图! 白嫖万岁!当然,如果有帮助,希望不要吝啬你的点赞呀!通过组合element-ui 中的 tree 和 table组件,实现联动效果,单选(有需要可以自己改成多选)用户信息,传出到父组件中,通过触发方法接收。原创 2022-12-13 12:07:40 · 3175 阅读 · 1 评论 -
< element-UI中 el-select组件,下拉时内容无法显示滚动条 >
在前端开发中,我们会使用到`v-for`循环一些选择类型组件的选项,便于接受后端返回的数据,用于渲染在组件上。结构较为简单! 但是当后端数据传回较慢时,或者渲染时,赋值方法有误,可能会导致element组件无法及时重新判断样式,导致组件选择样式有误!...原创 2022-08-04 15:32:08 · 2235 阅读 · 4 评论 -
< element组件封装: element表格(element-table)实现表格列筛选功能组件 >
在 Vue + elementUi 开发中,element表格本身仅自带升序和降序排列,可能在日常开发中,不太能满足自定义筛选的要求,比如说,实现excel文档中的筛选个例的功能,今天小温就把这个干货给大家分享一下。本篇文章简单展示! 案例仅供参考!话不多说,先上效果图! 白嫖万岁!当然,如果有帮助,希望不要吝啬你的点赞呀!......原创 2022-06-30 12:03:43 · 3875 阅读 · 5 评论 -
< elementUi 组件封装: 封装 el-select 组件,实现关键词(经常搜索、热点搜索)提示 >
在 Vue + elementUi 开发中,有时候多次重复的搜索关键词, 可能需要实现`热点搜索` 或者 `关键词搜索`等功能。但是呢,在 `elementUi` 中,显然没有自带这么一个组件,这时就需要我们去实现了。原创 2022-05-25 15:07:32 · 2032 阅读 · 0 评论 -
< 在 elementUi 中,el-upload 上传组件封装 >
在前端开发时,对于表单中的上传组件,我们可能需要自己自定义上传组件的样式 或者 增加一些附加的功能等等。所以,特此小温给大伙带来一期 `el-upload` 组件封装。 先上效果图,后上实现源码。可能和实际使用有出入,如有问题,请在评论区 或 私聊询问!原创 2022-05-19 10:39:17 · 3882 阅读 · 1 评论 -
< 在elementUi中,实现el-input组件封装,适用于动态存储为数组 >
在前端开发时,我们偶尔需要在一个表单字段,存储为字符串数组,且需要动态控制存储大小。这就需要封装成一个小组件了,今天小温分享一个存储数组字符串组件。原创 2022-05-18 18:12:09 · 2265 阅读 · 1 评论 -
< 在Vue中 el-popover + el-tiptap 实现 富文本框输入,表格点击展示 (富文本HTML标签渲染) >
在Vue开发中,有时候需要用到富文本框输入指定的 `富文本`,输出端(多为表格)展示指定内容! 这时候,富文本框插件就很重要了! 所以小温给大伙带来 富文本插件 el-tiptap 使用及案例原创 2022-05-01 00:00:00 · 6199 阅读 · 13 评论 -
< elementUi 中 树状侧边栏,机构单位 - 岗位 字典 >
在 Vue + elementUi 开发中,某些后台管理系统是拥有 `“ 机构单位 ”、“ 岗位 ” 及 “ 角色 ”` 等字段的! 但是有些需求是需要`可视化`的对 这些 设计 “ `树状数据` ” 实现可视化展示及增删改查操作! 这里就需要用到 elementUi 的 树状组件去封装对应的内容了!原创 2022-04-21 11:11:46 · 1216 阅读 · 0 评论 -
< elementUi 中 封装 NavMenu 导航菜单,实现单页面侧边导航栏 >
在 Vue + elementUi 开发中,在大部分后台管理系统都会选择实现 “ 单页面 ” 应用,简称:`SPA`。但是实现单页面应用,页面布局显然很重要,在开发中,有时候需要,自己编写一个 单页面导航栏。本篇文章将简单展示! 案例仅供参考! ...原创 2022-04-20 17:43:45 · 7302 阅读 · 0 评论 -
< 在 elementUi 中 设置 Table表格 多选勾选规则限制 >
在 Vue + elementUi 开发中,表格可以说是我们最经常使用的组件之一。今天我们就 `elementUi` 的表格的 多选规则限制展开讲解!原创 2022-04-12 17:13:46 · 8645 阅读 · 7 评论 -
< elementUi 下拉选择框组件 树状部门选择( 多选/单选 )>
文章目录前言一、树状部门数据 下拉框单选实现代码:> 组件代码 ( 父 )> 组件代码 ( 子 )二、树状部门数据 下拉框单选解释:多选和单选的代码差不多,就不做庸余的复制粘贴了。总结前言在前端开发中,平时在填写表单中,可能会遇到需要展示选择树状数据的表单组件。但是在element中,并未提供能够处理树状数据选择的 select 选择框组件。所以就此,小温在开发中遇到类似的问题,封装了elementUi 的 select选择框组件。接下来给大家讲述一下! 希望能给大家一些帮助!提示:以原创 2022-04-08 16:21:26 · 13604 阅读 · 24 评论 -
< elementUi 表格 合并表格 -- 根据后端数据形成树状表格 >
elementUi Plus + Vue 3 实现后台标签管理表格 树状权限表格原创 2022-03-31 17:54:38 · 2155 阅读 · 4 评论