朝花夕拾的博客

在路由跳转的时候，我们经常会传一些参数过去，然后通过传过来的参数调用接口获取相关数据，但是刷新浏览器的时候路由参数会丢失。此时页面报错误了，如何通过全局配置的方式，不需要修改任何组件 实现刷新浏览器保存参数？此时刷新浏览器会保留当前参数~完美解决 无需修改任何组件。首先在router/index.js里添加参数管理器。通过路由全局守卫方法来吧路由参数进行监听存储和清除。

Vue 3.x 和Vue 2.x 如何使用watch监听对象

2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王）耗时2年多、2600+次提交30+个RFC600+次PR99位贡献者什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。

然后说下选中当前节点去获取其节点下的所有子节点的ID问题，网上搜了许多没有合适自己的方法，项目需求是单选，用了父子不关联的方法实现的单选，需要做下控制就是父节点不允许点击的情况下的子节点也不允许点击，这个时候就需要递归算法解决此问题，（递归算法适用所有场景下的获取子节点的数据）第一个参数为ture表示获取子节点下的数据，由于父子不关联，所以取值为空数组。官方提供了这个方法 获取选中节点的数组可以方便我们进行递归实现。设置选中节点后去递归获取选中节点的所有子节点的数据。

这里写的小写v就会报上面的错误 改成大写就好了。如下错误看引入的组件名称是否写错。SFC(单文件)注册。

eventBus.$emit('openUserModal','参数')创建event-bus.js。

setCurrentRow 不加参数默认去掉高亮显示选中行。此时会触发current-change事件 需要进行判空操作。

下拉框数据的id和上一次显示的数据的id是一致的导致数据没有更新 显示的还是上一次的数据。修改时将number++ 让组件渲染。通过key唯一标识 可以解决此问题。

页面使用 @input监听输入框输入。proxy为当前组件实例。

删除数据时页面还是勾选状态 添加此方法。proxy为当前组件实例。

这样可以显示两个弹窗样式 一个有文件时的 一个没有文件时的样式。不符合条件不会添加这个divbox。divbox类样式深度渲染。

放在一个div里面显示正常 vue3不是说可以有多个根组件吗 有了解的告知下麻烦~组件模板出现多个div vue3已支持多个根标签 但是这样写会导致页面空白。

点击文件上传按钮弹窗 然后取消时这个时候外面的dialog会自动关闭。去掉el-dialog里面的cancel方法

【代码】Vue3+ElementPlus Modal弹窗布局美化。

【代码】Vue3+ElementPlus el-input textarea类型 label垂直居中。

使用form.value.materialTypeId = undefined 是不管用的。

采用vue3+elememtplus+vite搭建新系统。不使用后台服务修改这里。

ref和modal的名称不能一致 换个值就ok了。

【代码】Vue3+ElementPlus 自定义全局指令过滤输入框前后空格。

文件限制一张 需要替换掉上次上传的文件 用到slice（-1） 代表获取数组末尾的元素。这里设置为true还是不显示问题 需要回显时将文件的status改为done。批量下载文件 文件类型为压缩包文件流。resolve（true）确认删除。多文件上传 限制大小 自动过滤拦截。rejcet（false）不删除。上传限制一张文件并且限制文件类型。添加Promise对象接收。表单提交 文件转文件流。

modal外层要添加一层div。

【代码】Vue3+ElementPlus el-tree组件封装 实现虚线和自定义图标（拿来获取数据后即可使用）

【代码】Vue3+ElementPlus el-tree树添加虚线 滚动时虚线显示问题处理。

el-tree 1到4级设置图标如下 通过插槽。

wacthEffect 自动追踪响应式对象的属性 watchPostEffect追踪Vue更新后的对象。不能直接监听响应式对象的值。

安装插件 unplugin-auto-import。vite.config.js中修改。

网上都说这样改 但是我的改了无效！

大部分原因是还没获取到DOM元素就开始执行此方法导致报的错误。通过添加nextTick(()=>{})可以尝试解决~OK。