- 博客(21)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 element-plus表格排序翻页失效解决办法，像是组件bug
做表格排序，支持分页功能，发现翻页后，排序状态在，但是内容不对，检查发现，翻页没有触发排序函数，只有点击排序按钮才会触发，sort-method和sort-change都一样，翻页不触发。这个感觉是一个bug，老版本似乎不存在。使用sort-change事件，记录下排序prop和按钮状态（倒序或者正序），点击翻页时候，传递参数给后端接口，这个方法不详细说了。
2024-05-20 19:08:00
261
1
原创 el-tree-v2虚拟滚动树，实现代码勾选、动态禁用勾选、检索、节点文字label宽度超出滚动等功能
某个需求要展示大量树节点，原本使用普通el-tree，默认不要展开太多层次（注意树节点默认全部展开页面渲染很卡），勉强能应付，但是检索功能会展开所有节点，还是很卡顿，只能硬着头皮改版，就想到了用element-plus的虚拟滚动树。查了网上没有多少el-tree-v2的使用文章，下面是自己的踩坑过程，给有需要的人提供些帮助。
2024-04-28 16:06:00
1280
1
原创 vue3 JavaScript实现微信和qq消息提醒闪烁效果
最开始想到使用css3动画，改变opacity来实现，这种方式最简单，实际做出来是呼吸灯效果，不是很好。需要注意，闪烁的元素很可能没办法触发点击事件，这里解决办法，是上面定位一个透明元素，点击元素实现点击效果。后来想到还是用js实现比较合适，改变隐藏和显示状态。//如果数量大于0，就触发闪烁。// 右上角红色告警闪烁效果。//卸载页面记得清除定时器。//获取告警数量请求。
2024-03-22 17:51:59
585
1
原创 vue3通过js触发el-button的点击事件
项目登录页，需要点击登录按钮，实现一些需求，因为回车键也绑定了，想通过js实现触发，虽然问题没解决，但分享下触发方法。
2024-02-02 14:53:32
1308
原创 element-plus图标el-icon设置size不生效排查
这个项目是使用vue3+element-plus按需引入来做的，想了解按需引入的伙计，可以看下我之前的文章。我发现给el-icon设置size属性没效果，最开始因为是某些样式没生效，试了引入全部样式也不行
2024-01-26 09:44:09
1125
1
原创 element-plus，el-tree动态禁用复选框，自动勾选复选框
项目需求是菜单权限分配，特殊的地方在于，首页为递进关系，可以依次跳转，全国–>省级–>市级，可以选择全国/省级/市级、省级/市级、市级，但是不能跳着选。控制上的难点，在于根据勾选节点，动态控制其他节点的勾选和禁用。常规的解决办法是，遍历结构树，或者通过check事件，遍历节点，这种方法会有些麻烦。这里提供一个比较简便的方法。//这里根据每次的选中和取消选择，控制其他节点状态。//关键代码，这里返回一个函数，允许动态控制变量。这里只贴关键代码，仅供参考。
2024-01-18 20:02:40
1968
1
原创 element-plus走马灯跟随图片高度变化，适应图片高度
el-carousel提供了一个height，不过是固定的，需要自己动态获取图片高度，赋值给走马灯。图片点击下一张，每一张的长宽可能都不一样，比例也不同，期望宽度顶满，高度动态变化。//跑马灯提供的change事件，会返回当前索引和上一次索引，//根据索引，每次手动触发时候，动态获取和设置高度。因项目实际需求稍微复杂，此处只贴了部分关键代码。
2023-12-27 18:33:27
1099
1
原创 element-plus prompt弹框隐藏明文，手动控制关闭
想使用prompt来实现，但官方示例没有隐藏输入内容的配置项，也没办法在密码校验错误的情况下，不要关闭弹框，好在有大神提供了隐藏配置项，在此记录下。1、删除行数据时候，询问用户该行相关数据都将删除无法恢复，是否删除？2、选择确认，还需二次输入密码确认，才会真正调用删除接口。关键配置项，都在代码注释里边。
2023-09-13 16:05:52
731
原创 vue3 element-plus el-table表格toggleRowSelection方法选中无效
不管怎样遍历，toggleRowSelection方法传入的row，都要从表格tableData里取值，类似tableData[0]这样，或者tableData.forEach中的item。以上是element-plus官方的一个选中示例。如果我们新建一个row数据，发现就是勾选不上，延迟执行也不行。
2023-08-17 17:27:58
3914
7
原创 element-plus el-table表格分页选择，数据回显
添加reserve-selection属性就可以实现（row-key需要有效），每次勾选，事件都会把所有勾选行返回，这个比较简单。但是本次需求更复杂一些，el-table提供的全选和单选勾选事件，不能直接返回哪个勾选和取消了，需要我们自己来对比判断。因为页面代码多，容易干扰，只放了部分，最重要的在单选和全选按钮勾选事件处理上。1、新建表单信息，选择电厂，电厂列表为后端分页，来回翻页需要保持勾选。2、编辑时候，需要数据回显，把上次保存的数据勾选上。如果只是想实现翻页保留勾选，给。
2023-08-17 15:48:08
2257
1
原创 vue3.2+element-plus实现el组件和页面换肤，组件交互hover、focus等换肤效果
如果只是想修改element-plus的颜色，可以参考我之前的一篇文章，修改.scss文件实现。但如果想动态换肤，scss文件需要编译，没有找到可以切换scss实现换肤的办法，不过官方有给出另外的办法，所有的element组件样式，都有css的变量var写法。之前也参考也其他文章的做法，但是有个不足，都没有讲到怎样修改组件交互的颜色，类似hover、focus。
2023-08-04 15:52:26
872
1
原创 vue+element-plus el-table表格slot传入动态html内容
后端返回的是0、1、2、3这样的数字，需要格式化成对应的汉字，还要根据内容来添加警告颜色。使用:formatter属性只支持返回字符串。所以这里使用返回html方式解决。
2023-07-17 10:18:00
750
1
原创 vue3.2 vite element-plus组件按需引入
组件相关：@vitejs/plugin-vue、unplugin-auto-import、unplugin-vue-components，此时直接在页面内使用组件就可以，根目录下components.d.ts文件会动态引入使用的文件。但是一些全局组件，弹框、对话框等直接在js里调用的，并不会被引入，需要手动引入到全局。图标的使用也需要手动引入，不然会提示找不到组件。图标相关：unplugin-icons。
2023-07-04 16:48:36
557
原创 vue高德地图开发，使用天地图卫星地图瓦片，解决不生效问题
高德地图开发文档多，api更多，但是卫星地图不全；天地图是政企地图，恰好相反。项目中结合二者来开发，踩了很多坑，在此记录。
2023-06-30 18:12:22
1564
3
原创 前端字体包提取指定文字
项目中有个倒计时，UI设计了扁平的时钟字体，非常规字体，下载完整字体包体积大，某些有几M，需要提取用到的部分，看了别人的文章，实践了比较简单好用，记录下
2023-06-28 15:40:53
711
1
原创 vue3.2 element-plus el-tree添加结构线/引导线
使用了一个第三方插件，地址https://github.com/GitOfZGT/element-tree-line用法简单，灵活，通过slot实现，侵入性低，关键代码如下。
2023-06-26 10:50:51
1459
1
原创 vue3.2 element-plus el-tree仅点击子级最后一级高亮，父级不高亮
vue3.2 element-plus el-tree仅点击子级最后一级高亮，父级不高亮
2023-06-12 11:01:33
1240
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人