- 博客(21)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 【前端组件库】el-table 为树形结构数据, 选中父级联动自己的单选框选中,并存入对应数组中(包括其他数据条件) -elment ui
本文介绍了如何使用Element UI的el-table组件处理树形结构数据，并实现选中父级时自动选中所有子级的功能。首先，通过select事件获取选中的行数据，并利用ref绑定el-table来获取所有选中的行对象。接着，通过递归函数toggleChildrenSelection处理当前行及其子节点的选中状态，确保父级选中时子级也自动选中。最终，提取所需的ids数组用于后续操作。该方法有效解决了Element UI默认不支持父级选中时子级自动选中的问题。
2025-05-22 17:49:58
173
原创 [前端-组件库] Vue2项目中, element ui树形表格数据, selection多选选中父级无法选中子集问题解决
Element UI 的树形表格默认情况下选中父节点不会自动选中子节点，这是为了保持组件的灵活性和可定制性。树形表格本质上是视觉上的层级展示，而非真正的树形选择控件，因此内置的多选功能仅针对当前点击的节点，不会递归处理子节点。若需实现父子联动逻辑，可以通过编写 @select 事件的方法 handleSelect，并利用递归方法 toggleChildrenSelection 来同步子节点的选中状态。通过调用 toggleRowSelection API，可以实现节点的选中状态切换，从而在选中父节点时自动选
2025-05-20 15:01:36
316
原创 【webstorm工具】WebStorm开启自动fetch,定期从远程仓库拉取最新变更
WebStorm 会在右下角通知栏显示 Fetch 结果，若有新提交会高亮显示（如分支名变蓝）。默认编辑器的自动获取时间间隔是 5分钟, 最后保存应用即可。选择 version control (版本控制中心)还有针对 Git fetch 的可视化提示。
2025-05-17 09:13:18
165
原创 [前端问题解决]-el-table表格出现 [Vue warn]: Duplicate keys detected: ‘1219‘. This may cause an update error
行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。以下使我们初始的代码<el-table这里说明了表格有重复值为 1219 的 key 值, 这里我们不能使用 projectId 作为 key 了, 根据表格返回的数据, 我们改用函数 Function 类型的 key 值。
2025-05-09 17:48:35
184
原创 [开发工具]- webstorm在粘贴代码时存在大量的空格缩进解决方法
粘贴后有很多冗余的空格缩进, 目前是编辑器的默认设置。这里我使用的中文插件, 更方便理解.现在我们粘贴测试下, 问题已解决~现在我们修改一下配置。
2025-05-08 14:01:11
198
原创 Web 界面写出爱心跳动效果，运用 css3 动画
* auto 自动相等 *//* 变换: 位移和旋转 *//* 变换: 位移和旋转 *//* 默认大小为1倍 *//* 设置圆角弧度 *//* 播放动画 *//* 横排显示 *//* 阴影设置 */
2024-11-09 17:50:21
422
原创 [前端]--原生代码实现控制全局的深色模式切换方法, 可绑定点击按钮实现切换效果, 介绍网页深色模式插件
这段 CSS 代码实现了将网页中的整个页面内容和所有图像反转颜色，使其呈现出深色模式的效果。对于body我们设置了一次滤镜翻转, 所以它会影响到图片的显示效果, 那么对于图片就要在实现一次翻转就恢复了原样。在浏览器的页面中, 我们可以通过开源的组件库实现深色模式的切换, 现在我们快速使用 CSS 来实现这个深色模式。由于图片防止出现颜色反装, 所以需要对图片进行二次反转, 防止图片的显示效果变得异常。这里也推荐一个网页插件实现页面浏览的深色模式切换, 在网页的应用商店直接下载即可,
2024-11-03 20:14:44
278
原创 [前端]-Vue项目中, 记录用户关闭最后一个tab页面,利用本地localStorage
在页面初始化打开时, 会执行到window.onload属性, 所以监听这个方法。
2024-05-30 12:57:59
245
原创 如何开启window电脑电源开启卓越性能模式, 方法步骤, 游戏模式通用
win+R , 输入 control , 打开控制中心, 选择电源模式, 勾选卓越性能, 即完成。复制以下这个命令, 直接回车运行。看到提示开启了, 卓越性能模式。
2024-05-27 10:03:38
2943
原创 瞬间让你的浏览器不一样, Chrome浏览器主题美化插件 - 高级感图标精美画面流畅 iTab插件,
功能非常强大, 壁纸也有动态的壁纸, 让你的浏览器立刻就高级起来, 图标默认也可以自定义调节, 有许多已经装上去的图标 App。在谷歌扩展商店中搜索 iTab , 可以看到评价还是很高的。简单看一下插件结构, 上下滚动切换跟手机一样流畅的动画。右侧有侧边栏, 打开设置, 里面有许多选项也支持自定义。还可以添加许多组件, 丰富多样, 模块化设计。下面是我的主页插件, 可供参考。
2024-01-30 21:30:47
2644
1
原创 安装nvm版本管理工具,并使用nrm选择淘宝镜像源,详细图解
查看当前的镜像源列表, 默认会选择的是npm官方源, 对于国内可能有时会存在下载缓慢甚至超时的问题,npm list available 显示当前所有可用的node版本号。如果发现npm的下载比较慢的话, 可以安装nrm镜像源管理工具。所以我们可以选择taobao国内的镜像源。如果无法正常加载, 需要开启科学上网。至此, 我们完成了镜像源的更换,选择一个需要的版本, 直接安装。选择版本号使用, 就选择成功了。
2023-12-21 12:39:01
1855
原创 配置解决 HBuildX 的主题(雅蓝)配色注释和标签不清晰, settting.json文件配置
在 setting.json 文件中添加配置。效果如下, 还有的配置也可以自定义修改。
2023-11-23 13:01:13
307
1
原创 Vue vue cli 3.x 项目部署到github page
ue CLI 3.x 项目部署到 GitHub Pages，请看以下步骤在你的 Vue CLI 3.x 项目中，打开命令行终端在 GitHub 上创建一个新的仓库，用于托管你的静态页面。确保仓库的名称为，其中<username>是你的 GitHub 用户名。在命令行终端中，导航到你的项目根目录替换<username>为你的 GitHub 用户名。等待代码推送完成后，访问即可查看部署后的项目。publicPath这样，你的 Vue CLI 3.x 项目就可以成功部署到 GitHub Pages 上了。
2023-09-02 10:20:09
243
原创 Vue2的学习笔记
自己定义的指令，可以封装一些dom操作，扩展额外的功能。v-focusv-loadingv-lazy需求：页面加载时，让元素将获得焦点mounted(){//渲染周期，也能使用mounted完成元素焦点获取全局注册- 语法 在main.js 文件中// 1. 全局注册指令// inserted 会在 指令所在的元素，被插入到页面中时触发// el 就是指令所绑定的元素el.focus()})局部注册- 语法 在组件中<script>// }
2023-08-07 14:51:21
140
原创 解决cdn在线引入vue echart axios等框架请求失败 请求超时
解决cdn在线引入vue echart axios等框架请求失败 请求超时
2023-07-09 10:50:57
1270
1
原创 Vue框架介绍
Vue是一个用于的框架声明式渲染 组件系统 -- 客户端路由 VueRouter -- 大规模状态管理 Vuex -- 构建工具 Webpack / Vite优点：大大提升开发效率 （70%）缺点：需要理解记忆规则 -》官网Vue2 的在线引入 引入的是开发版本的包， 包含完整的注释和警告准备容器引包 开发版本/生产版本创建vue实例 new Vue()指定配置项 el data 渲染数据Vue2是通过Object.defineProperty实现响应式，Vue3是通过Proxy。
2023-07-05 23:24:59
287
原创 web界面写出表白跳动爱心
<!DOCTYPEhtml><htmllang="en"><!--头部标签--><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial...
2021-08-19 13:46:41
1131
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人