Vue删除数据成功后如何刷新表格数据(this.reload)
Vue删除数据成功后如何刷新表格数据(this.reload)
·
刷新表格数据的方法
1、this.$router.go(0)
2、location.reload()
3、跳转空白页在跳回原页面
4、控制的显示与隐藏(最实用)
刷新表格数据的方法:
1、this.$router.go(0)
这种方法页面会一瞬间的白屏,体验不是很好,虽然只是一行代码
2、location.reload()
这种也是一闪,效果不好
3、跳转空白页在跳回原页面
在需要页面刷新的地方写上:this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …t(vm => { vm.router.replace(from.path)
})
}
这种画面虽不会一闪,但是能看到路由快速变化
4、控制的显示隐藏(最实用)
在App.vue中写如下代码
template>
<div id="app">
<router-view v-if="isShow"></router-view>
</div>
</template>
<script>
export default {
name: 'App',
provide () {
return {
reload: this.reload
}
},
data () {
return {
isShow: true
}
},
methods: {
reload () {
this.isShow= false
this.$nextTick(function () {
this.isShow= true
})
}
}
}
</script>
然后再需要刷新的页面引入依赖:inject:[‘reload’]
<script>
export default{
name:'booklist',
inject:['reload'],
data(){
return{
在需要执行的地方直接调用方法即可:this.reload()
deletebook(val){
var formdata = new FormData()
formdata.append("val",this.val)
this.axios({
url:"自己的",
methods:'post',
data:formdata
}).then(res=>{
if(res.data.code == 200){
alert(res.data.message)
}else{
alert(res.data.message)
}
this.reload()
})
},
————————————————
版权声明:本文为CSDN博主「星空浩荡」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_45139342/article/details/107976362
更多推荐
已为社区贡献2条内容
所有评论(0)