elementui刷新

刷新当前页面

使用 window.location.reload() 方法可以强制刷新当前页面。这种方法会重新加载整个页面，包括所有资源。

window.location.reload();

局部刷新组件

在 Vue 中，可以通过修改组件的 key 属性来强制重新渲染组件。ElementUI 组件也适用此方法。

<template>
  <el-button @click="refreshComponent">刷新组件</el-button>
  <el-table :key="componentKey" :data="tableData"></el-table>
</template>

<script>
export default {
  data() {
    return {
      componentKey: 0,
      tableData: [...]
    }
  },
  methods: {
    refreshComponent() {
      this.componentKey += 1;
    }
  }
}
</script>

刷新表格数据

对于 ElementUI 的表格组件，可以通过重新获取数据并更新数据源来实现刷新效果。

<template>
  <el-button @click="refreshTable">刷新表格</el-button>
  <el-table :data="tableData"></el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: []
    }
  },
  methods: {
    async refreshTable() {
      const res = await fetchData(); // 获取新数据
      this.tableData = res.data;
    }
  }
}
</script>

使用 provide/inject 强制刷新

在父组件中使用 provide 提供刷新方法，子组件通过 inject 注入并使用。

// 父组件
export default {
  provide() {
    return {
      reload: this.reload
    }
  },
  methods: {
    reload() {
      this.show = false;
      this.$nextTick(() => {
        this.show = true;
      });
    }
  }
}

// 子组件
export default {
  inject: ['reload'],
  methods: {
    handleRefresh() {
      this.reload();
    }
  }
}

路由刷新

通过 Vue Router 的导航守卫或编程式导航实现路由级别的刷新。

// 跳转到当前路由
this.$router.push({
  path: '/redirect' + this.$route.fullPath
});

// 或者在路由配置中添加重定向路由
{
  path: '/redirect/:path*',
  component: () => import('@/views/redirect/index')
}

使用 v-if 控制显示

通过 v-if 指令临时移除再重新渲染组件实现刷新效果。

<template>
  <el-button @click="toggleComponent">刷新</el-button>
  <div v-if="showComponent">
    <el-table :data="tableData"></el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showComponent: true,
      tableData: [...]
    }
  },
  methods: {
    toggleComponent() {
      this.showComponent = false;
      setTimeout(() => {
        this.showComponent = true;
      }, 100);
    }
  }
}
</script>