关于前端:解决Vue-不顺序执行方法树形表格对子数据修改后的自动刷新等

VUE 一款国人研发的弱小的前端框架
与 elementUI 的高密度交融给后端人员也带来的很大的福利
小编这不也上手学习了, 然而尽管学习简略, 上手操作那可是处处大坑啊
明天小编就来说手 VUE 与 ElementUI 整合的一些坑

VUE 刷新页面后导航栏的已选中被重置

大家都晓得 ElementUi 的导航栏组件会有一个默认选中的标签，咱们能够通过鼠标点击来切换标签，然而当开发时每次刷新页面后，咱们曾经点击的标签都被重置，然而展现的页面仍旧是上次选中标签后跳转的页面，大家能够先看图：
- 未抉择标签时默认展现首页(代码)：
- 未抉择标签时默认展现首页(成果)：
然而此时如果点击了其余的标签, 如 hehe, 会发现刷新后标签页又被重置到首页
- 点击 hehe 后
- 点击 hehe 刷新后
谬误剖析：因为标签页的默认选中在 vue 实例中绑定的值是不变的所以每次刷新后改值再次渲染到标签页, 那么就会呈现刷新重置的成果, 能够猜想一下, 只需将改值变为动静获取即可
解决方案：间接在 vue 实例中与标签绑定的值批改为：this.$route.path 这个值代表获取以后路由地址, 即是每个标签页的 index 的值; 设置后咱们看下成果:
- 设置代码
- ps: 此种形式必须要求标签的 index 属性的值必须是正确的路由门路

ElementUi 的树形表格子数据批改后主动刷新

ElementUI 中的树形表格置信大家也常常应用，外面蕴含的子数据在类别展现时十分的直观形象，然而小编在应用中还是发现了一小坑，就是在利用 axios 删除或者批改某一子数据后，子数据不会主动渲染到页面，图示如下：
- 树形表格大榄：
- 代码
通过测试发现，这个下拉箭只会在进入当前页第一次点击时才会进入子加载的代码，所以此时批改了子数据，即是再次点击下拉箭头也不会更新子数据，这块大家也能够本人测试一下看下成果

解决方案：

// 可在批改操作后从新查问并执行以下代码
this.$set(
    this.$refs.myTable.store.states.lazyTreeNodeMap, 
    parentId, 
    list);    
 // 参数一写死
 // 参数二代表须要跟新的父数据 id 值
 //ps: 不肯定是 id 依据本人再表格中 row-key="id" 绑定的值来确认
 // 参数三更新的数据 即数据通过批改从新查问后的数据

vue 中 axios 发送 post 申请时传参问题

大家都晓得 post 申请的传参形式是利用申请体携带的形式来传参那么在 post 传递参数时前端的数据格式是 json 后端是 java 所以在 vue 前后端拆散我的项目中会存在后端参数接管不到的状况
状况 1：
- 前端传递的 json 格局是对象模式的 json
解决方案：
- 在 springboot 控制器对应的办法的参数地位增加 @RequestBody 注解
状况 2：
- 前端传递的 json 格局是键值对的 json
解决方案 1：
- 利用 vue 的组件 qs 将参数拼接成键值对的形式 ps:qs 须要独自下载
解决方案 2：
- 利用 js 的内置对象 URLSearchParams 来拼接出一个规范的键值对模式的参数
- ps: 此种形式存在不兼容浏览器的状况所以还是不是的较好

vue 办法内代码不程序执行的问题

因为 vue 大量应用 axios 发送异步形式的申请，所以在代码执行遇到异步申请后并不会期待异步申请的执行结束，此时如果上面的代码须要用到异步申请的返回后果，那么问题就来了：

还是利用下面树形表格的例子，当咱们进行批改操作后，须要用异步申请发送到后盾查问最新的数据，再执行 vue 更新数据的办法，此时通过测试发现，vue 更新数据的办法会先执行，那么此时数据并不是最新数据，将会导致渲染失败，代码：

// 删除一个级别
handleDelete(index, row) {
    // 删除的 post 申请
    1  this.$http.post("url", parem).then((res) => {_this.mesg(res);
    });
    // 从新查问数据 办法内将数据赋值给 this.parentData
    2  this.findByLevel();
    3  console.log(this.parentData);
    // 更新子集数据
    4  his.$set(this.$refs.myTable.store.states.lazyTreeNodeMap, row.parentId, this.parentData);
},
// 查看网页成果发现表格子数据并没有更新 但 DB 正确更新数据
// 通过测试发现第三步的打印最新数据的时候 并不是 DB 的最新数据 这就比拟懵逼了 明明跟新了数据啊

咱们无妨猜想一下是否第二步更新数据的办法并没有期待第一步的执行或者第四步没有期待第二步的执行？带着这个问题度娘了一番，最终发现猜测正确并找到一篇比拟好的示例网站贴给大家：async 函数的应用

解决方案：

// 在办法上标注 async 函数
async handleDelete(index, row) {
    // 在必须期待的异步申请的调用前标注 await
    await this.$http.post("url", parem).then((res) => {
        //ps: 如果在异步申请内又蕴含了一个异步申请那么即便在外部申请中也应用了 async 和 await 同样有效 依然不会期待此办法的执行
        _this.mesg(res);
    });
    // 同样标注 await
    await this.findByLevel();
    console.log(this.parentData);
    
    his.$set(this.$refs.myTable.store.states.lazyTreeNodeMap, row.parentId, this.parentData);
    },

写在前面

那么明天对 vue 的应用中发现的坑的探讨就到这里了
日后如果遇到高级坑依旧会来更新文章
还请小伙伴们多多关注啦有问题随时随时留言哦

关于前端:解决Vue-不顺序执行方法树形表格对子数据修改后的自动刷新等

针对 VUE 开发中遇到的坑

大坑一

VUE 刷新页面后导航栏的已选中被重置

大坑二

ElementUi 的树形表格子数据批改后主动刷新

大坑三

vue 中 axios 发送 post 申请时传参问题

大坑四

vue 办法内代码不程序执行的问题

写在前面