- 博客(67)
- 收藏
- 关注
RSS订阅原创 vue3 elementplus el-table toggleRowSelection使用方法
事件，实现点击表格行即可选中或取消选中该行。，你可以在下一个 DOM 更新周期后，通过。：遍历所有表格数据，切换每一行的选中状态。：当数据加载后，例如从接口获取到。事件中，确保只保留最新选中的一行。获取表格实例，并调用。，从而能正确设置选中状态。
2025-11-21 15:52:19
583
原创 ECharts: 绘制立体柱状图【圆柱体】
是通过 ECharts中内置的渐变色生成器 echarts.graphic.LinearGradient。该方法在循环遍历的数据中未能实现上图效果，待完善。可以用来设置渐变色.
2025-09-21 23:43:28
305
原创 【Git】git提交代码报错Git: husky ＞ pre-commit
这个问题是因为当你在终端输入git commit -m “XXX”,提交代码的时候,pre-commit(客户端)钩子，它会在Git键入提交信息前运行做代码风格检查。进入项目的.git文件夹(文件夹默认隐藏,可先设置显示或者命令ls查找),再进入hooks文件夹,删除pre-commit文件,重新git commit -m ‘xxx’ git push即可。在提交代码commit时，加上参数 --no-verify, 可以忽略pre-commit代码校验的钩子 ，绕过eslint的检查了。
2025-08-05 17:45:35
550
原创 Vue3 + Element Plus Transfer 穿梭框自定义分组
template>:titles="['可选数据', '已选数据']"/>// 分组数据格式label: '第一组',{ key: '1', label: '选项1' },{ key: '2', label: '选项2' }},label: '第二组',{ key: '3', label: '选项3' },{ key: '4', label: '选项4' }]);// 扁平化数据供Transfer使用}))});// 自定义渲染函数// 这里可以自定义渲染逻辑。
2025-06-27 16:53:05
418
原创 Vue3 Element Plus 表格默认显示一行
- 列定义 --><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="age" label="年龄"></el-table-column><el-table-column :span="2">暂无数据</el-table-column>
2025-06-13 17:19:25
660
原创 Vue3 Form 表单限制输入小写字母、数字和下划线
template><el-form-item label="用户名"><el-inputplaceholder="只能输入小写字母、数字和下划线"/></el-form>// 自定义指令// 触发v-model更新});});</script>
2025-05-20 10:41:19
431
原创 Vue3列表移除元素后索引更新方法
如果需要在移除后执行其他操作，可以使用 watch 或 watchEffect 监听列表变化。Vue 会自动更新 v-for 中的索引，所以通常不需要手动处理。避免直接使用索引作为 key，这可能导致渲染问题。
2025-05-20 10:35:02
389
原创 Vue3 Element Plus el-tabs数据刷新方法
会完全销毁和重建组件，适合数据完全独立的情况。适合需要保留组件状态但刷新数据的情况。对于简单场景，直接使用。
2025-04-27 18:04:10
945
原创 防抖（Debounce）和节流（Throttle）
节流是一种限制函数执行频率的技术。它的原理是，当事件被频繁触发时，函数会按照一定的时间间隔执行，而不是每次触发事件都执行。换句话说，在一个时间段内，只会执行一次事件处理函数。
2025-03-28 23:00:00
431
原创 await func().catch()和try{ func() }.catch()，两种写法，有什么区别
和是两种处理异步操作错误的常见写法，虽然它们的功能相似，但在使用场景和细节上有一些区别。
2025-03-21 21:45:00
469
原创 前端vue中div设置background图片铺满div
使用CSS中的background-size属性和background-image属性来实现将图片作为一个div的背景图并撑满屏幕的效果。使用background-size属性设置背景图片的大小。如果使用background-size:cover属性不行,尝试background-size:contain属性。
2025-03-14 21:15:00
417
原创 defineProps 的使用方法
如果你使用 TypeScript，可以通过泛型的方式定义。在 TypeScript 中，如果需要为。是只读的，不能在子组件中直接修改。返回的对象可以直接在模板中使用。是编译器宏，不需要显式导入。提供默认值，可以使用。
2025-03-07 16:32:28
938
原创 校验v-for中的form表单
点击新增会在增加一个from表单，点击删除即删除一个form。1、for 循环体 或者map里是不支持await。整体外层一个form，内层多个form组成。2、避免层层嵌套的回调校验。
2025-02-16 21:56:29
234
原创 vue3 + vite 实现版本更新检查（检测到版本更新时提醒用户刷新页面）
当一个页面很久没刷新，又突然点到页面。由于一些文件是因为动态加载的，当重新编译后（如前后端发版后），这些文件会发生变化，就会出现加载不到的情况。进而导致正在使用的用户，点击页面发现加载不顺畅、卡顿问题。
2025-01-11 16:44:57
966
原创 ＞＞＞、/deep/、::v-deep、::v-deep()和:deep()的区别与用法
>>是CSS原生中的深度选择器语法，用于穿透样式封装。**兼容性：**仅在某些特定环境（如Webpack的css-loader配置中）和原生CSS中有效，Vue单文件组件中通常需要特定配置才能使用。**注意：**在Vue单文件组件中，我们通常会搭配css预处理器使用。但Sass之类的预处理器无法正确解析>>>，所以不推荐使用>>>，可以使用/deep/或::v-deep操作符取而代之，两者都是>>>的别名，同样可以正常工作。/deep/曾经是CSS中实际提出的新增功能，但之后被删除，所以。
2025-01-05 12:34:13
667
原创 关于window.open 被浏览器拦截解决方案
直接绑定到用户事件回调是最简单的方式，但局限性较大，无法适应复杂的异步场景。先打开空白窗口后填充 URL可以解决拦截问题，但用户体验不佳。最优方案是通过提示用户手动跳转或检测的返回值并提供兜底策略，从而确保用户体验和业务逻辑的完整性。链接：https://juejin.cn/post/7414305106825019402。
2024-12-29 22:38:25
1709
原创 处理错误的两种方式：try...catch 与 then...catch
适合于同步代码，能够捕获代码块中抛出的异常。then...catch：用于处理 Promise 的结果和错误，适合异步操作。结合 try...catch：提供了清晰的异步错误处理方式，增强了代码的可读性。原文链接：https://juejin.cn/post/7418133347543121939。
2024-12-20 21:15:00
855
原创 vue3中el-table 复选框设置为单选，且可通过选择行选中复选框
el-table中自带的复选框组件，可以多选，但是目前我们只想要让用户选中一个，变成单选。
2024-12-15 19:37:23
1070
原创 vue项目中，多个页面做离开页面未保存的提醒（离开/关闭/刷新页面提示未保存）
注：因为获取数据时接口返回的数据可能和离开页面前的数据结构不一致，可在copy数据时进行处理，也可在beforeRouteLeave.js中去单独比较这个页面的新旧数据。原文链接：https://blog.csdn.net/weixin_41746338/article/details/121203490。混入是可以进行全局注册的，但一旦使用全局混入，它将影响每一个之后创建的 Vue 实例，在这里我们不需要全局引入。在获取数据和保存数据的方法中，获取数据和保存数据后对ruleFormCopy赋值。
2024-12-09 07:21:51
829
原创 基于Vue3+Element Plus 实现多表单校验
表单校验在日常的开发需求中是一种很常见的需求，通常在提交表单发起请求前校验用户输入是否符合规则，通常只需formRef.value.validate()即可校验，但是，例如一些多步骤表单、动态表单、以及不同的用户角色可能看到不同的表单内容，因此需要对每个角色所看到的内容进行适当的校验的多用户角色的表单，此时，我们就需要同时校验多个不同的表单。
2024-12-01 21:24:21
752
原创 Vue 路由模式深度解析：Hash 、 History
通过使用 history.pushState() 和 replaceState() 这两个 API，我们可以在不重新加载页面的情况下修改浏览器的历史记录栈，从而改变当前地址栏的 URL。一个显著的特点是，在 Hash 模式下，页面的切换不会导致完整页面的重新加载。仅仅通过改变 URL 中的 Hash 部分，前端可以实现页面内容的动态更新，这有助于提供更流畅的用户体验，特别适用于单页面应用（SPA）。通过监听 hashchange 事件，我们可以捕获到 URL 的 Hash 部分的变化。
2024-11-25 22:00:00
2803
1
原创 vue-router的push和replace的区别
同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。router.go(0)//刷新。
2024-11-16 17:47:31
544
原创 监听路由的写法以及路由更新但是页面内容不更新的解决方案
3.router.go(0)刷新页面会触发组件初始化，组件初始化又会触发watch函数执行router.go(0)，并且触发路由发生变化执行router.go(0)，如此反复，便造成了页面一直刷新的情况。2.router.go(0)是刷新当前页面，如果设置immediate: true，组件初始化时执行一次router.go(0)，路由发生变化时又执行router.go(0)，4.不设置immediate: true，watch函数只会在路由发生变化时执行router.go(0)，不会一直刷新页面。
2024-11-10 20:51:03
302
原创 【vue3】实现el-tree组件，将不同层级的箭头修改成自定义图标
【代码】【vue3】实现el-tree组件，将不同层级的箭头修改成自定义图标。
2024-10-12 18:09:27
1098
原创 vue使用eval() 方法的以及一些特殊的使用方式
其功能和JSON.parse()是相似的，但是当已经为通过JSON.parse()转换为对象后的JSON不能再调用该函数继续进行转换，这样会报错，但是eval()方法不会当传入字符串是对象使继续使用上述的方式，然会返回原对象。当eval中的字符串内是对象时加上括号则可以将原对象原样返回，如果将code2={a:2,b:3}时直接eval(code2)时会报错，加上括号就会将code2原样返回。执行动态创建的函数是可能的，但这通常不是推荐的做法，因为它可能导致代码难以维护和理解。时，它返回的是局部变量。
2024-09-22 20:08:48
1596
原创 vue3 表单校验规则封装
/ 非空验证message: '此项为必填项',!value,},// 最大长度验证message: `输入内容长度不能超过${max}个字符`,}),// 最小长度验证message: `输入内容长度不能少于${min}个字符`,}),// 数值范围验证message: `输入值必须在${min}和${max}之间`,}),// 正则表达式验证message: '输入格式不正确',}),// 验证两次输入是否一致message: '两次输入不一致',}),
2024-09-17 21:49:00
789
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人