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

针对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的应用中发现的坑的探讨就到这里了
日后如果遇到高级坑依旧会来更新文章
还请小伙伴们多多关注啦有问题随时随时留言哦