对表格数据进行操作增删改后获取最新数据

最新推荐文章于 2024-11-21 13:42:48 发布

原创最新推荐文章于 2024-11-21 13:42:48 发布 · 393 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

本文介绍了两种在前端处理表格数据增删改后获取最新数据的方法。方法一是通过Vue的provide和inject，利用v-show切换达到刷新效果，避免页面白屏，但会导致数据和状态重置。方法二是子组件触发父组件的函数来获取更新后的数据，保持用户体验。

方法一利用provide和inject

利用v-show实现app组件的显示与隐藏达到刷新目的

优点：不会存在类似使用this.$router.go(0)和location.reload()页面出现白屏类似的情况

缺点：js全部重新加载运行，数据，分页条件，查询条件等会到初始值用户体检不好

代码实现：

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(()=>{
        this.isShow=true
      })
    }
  }
}
</script>

<style>
#app {
width: 100%;
height: 100%;
}
</style>

组件中使用


  export default {
    inject: ['reload'],//引入刷新页面的依赖
  methods: {
  
    submitOperate(){
      this.reload()
    }
  },

};

方法二

修改添加等操作在弹框，弹窗子组件进行时，利用子组件触发父组件的函数获取最新数据