vue elementui 当数据添加完后 是刷新页面 还是跳转显示方法

这个问题的答案取决于你的具体需求和业务场景。一般情况下，我们可以通过以下两种方式来实现添加数据后的显示：

1. 刷新页面：当添加数据后需要重新读取整个页面数据时，可以通过刷新页面实现。这可以通过在添加数据后使用 `window.location.reload()` 方法来实现。这种方式相对简单，但用户体验不是很好。

2. 跳转页面：当添加数据后需要在新的页面中显示新增后的数据时，可以通过跳转页面实现。这可以通过使用 Vue Router 来实现。具体的实现方式是，在添加数据后通过编程式导航（`router.push()` 方法）跳转到新的页面，并携带新增后的数据作为路由参数，然后在新的页面中通过 `$route.params` 获取路由参数，并显示数据。这种方式相对复杂，但用户体验更好。

无论采用哪种方式，你都需要在添加数据后更新数据源，以便在刷新页面或跳转页面后能够正确显示新的数据。在 Vue 中，你可以使用 `this.$set()` 方法或 `Vue.set()` 方法来更新数据源。例如：

this.tableData.push(newData) // 添加新数据
this.$set(this.tableData, this.tableData.length - 1, newData) // 更新数据源

其中，`this.$set()` 方法或 `Vue.set()` 方法的第一个参数是要更新的数据源，第二个参数是要更新的数据的索引或属性名，第三个参数是要更新的新值。这样就可以正确更新数据源了。

相关问题

vue2 elementui 后台新增完后返回列表页刷新页面

在Vue.js 2和Element UI中，可以使用路由导航和事件总线来实现新增后返回列表页并刷新页面的效果。

1. 在路由导航中定义列表页的路由

首先，在路由配置中定义列表页的路由，例如：

const router = new VueRouter({
  routes: [
    { path: '/list', component: List },
    { path: '/add', component: Add }
  ]
})

其中，List为列表页的组件，Add为新增页的组件。

2. 在新增页中提交数据并触发事件

在新增页中，通过Element UI的Form组件提交新增数据，并在提交成功后触发一个自定义事件，例如：

<template>
  <el-form @submit="onSubmit">
    <!-- 表单字段 -->
    <el-button type="primary" native-type="submit">提交</el-button>
  </el-form>
</template>

<script>
export default {
  methods: {
    onSubmit() {
      // 提交新增数据
      this.$http.post('/api/add', this.formData)
        .then(response => {
          // 触发自定义事件
          this.$emit('add-success')
        })
    }
  },
  data() {
    return {
      formData: {}
    }
  }
}
</script>

在提交成功后，通过`this.$emit`触发一个自定义事件`add-success`，表示新增成功。

3. 在列表页中监听自定义事件并刷新数据

在列表页中，监听新增页触发的自定义事件，并重新加载列表数据，例如：

<template>
  <div>
    <el-table :data="tableData">
      <!-- 表头和列 -->
    </el-table>
    <el-button type="primary" @click="add">新增</el-button>
  </div>
</template>

<script>
export default {
  mounted() {
    // 监听新增成功事件
    this.$bus.$on('add-success', this.loadList)
    // 加载列表数据
    this.loadList()
  },
  beforeDestroy() {
    // 移除事件监听
    this.$bus.$off('add-success', this.loadList)
  },
  methods: {
    add() {
      // 跳转到新增页
      this.$router.push('/add')
    },
    loadList() {
      // 加载列表数据
      this.$http.get('/api/list')
        .then(response => {
          this.tableData = response.data
        })
    }
  },
  data() {
    return {
      tableData: []
    }
  }
}
</script>

在列表页的`mounted`钩子函数中，通过`this.$bus.$on`监听新增成功事件`add-success`，并在回调函数中调用`loadList`方法重新加载列表数据。在`beforeDestroy`钩子函数中，通过`this.$bus.$off`移除事件监听，避免内存泄漏。

在`add`方法中，使用`this.$router.push`跳转到新增页。在新增页中提交成功后，通过`this.$emit('add-success')`触发自定义事件，列表页会收到通知并重新加载数据。

elementui表单提交后无感刷新页面

Element UI 提供了一个叫做`element-loading`的组件，可以实现表单提交后的页面无感刷新效果。通常的做法是在表单提交成功后，使用`this.$router.push()`或`this.$route.push()`跳转到新的页面，并在目标页面上通过`loading`组件显示加载状态，同时设置`meta`属性为`{ noCache: true }`防止缓存。

例如，在`axios`请求中添加拦截器，处理表单提交：

import { ElLoading } from 'element-plus';
import axios from 'axios';

Vue.prototype.$http = axios.create({
  // ... 其他配置
});

axios.interceptors.response.use(
  response => {
    if (response.data.status === 'success') {
      // 表单验证通过并提交成功
      this.$loading.finish(); // 关闭加载动画
      this.$router.push({ path: '/success-page', meta: { noCache: true } });
    }
    return response;
  },
  error => {
    // 处理错误...
  }
);

在这个例子中，`/success-page`是你想要无感刷新的目标页面。当用户点击提交按钮后，表单数据会被发送到服务器，如果请求成功，页面会自动跳转到`/success-page`，并且由于设置了`noCache`，浏览器不会从缓存中加载旧的内容，从而实现了无感刷新的效果。