如何在Vue中实现延迟刷新列表：以Element UI的el-switch为例-CSDN博客

本文链接：https://blog.csdn.net/moumouguo/article/details/148219783

如何在Vue中实现延迟刷新列表：以Element UI的el-switch为例

在开发过程中，我们经常需要根据用户操作或接口响应结果来更新页面数据。本文将以Element UI中的el-switch组件为例，介绍如何在状态切换后延迟1秒钟再调用刷新列表的方法，并确保UI与后台数据的一致性。

背景介绍

假设我们有一个开关(el-switch)用于启用或禁用某个部门的状态。当用户切换开关时，我们需要向服务器发送请求来更新该状态，并在成功或失败后刷新列表数据。为了提升用户体验，我们希望在请求完成后延迟1秒再执行刷新操作。

实现目标

用户切换el-switch时，发送请求更新状态。
根据请求结果（成功或失败）显示相应的消息提示。
请求完成（无论成功还是失败），延迟1秒后再刷新列表。

示例代码

1. 模板部分

<template>
  <div>
    <el-tooltip :content="scope.row.status==='0'?'启用':'禁用'" placement="top">
      <el-switch
        v-model="scope.row.status"
        active-color="#13ce66"
        inactive-color="#ff4949"
        @change="handleChange(scope.row)"
        active-value="0"
        inactive-value="1">
      </el-switch>
    </el-tooltip>
  </div>
</template>

2. 方法部分

我们将通过setTimeout函数实现延迟刷新列表的功能，并且无论请求成功还是失败都会执行延迟刷新。

<script>
export default {
  methods: {
    handleChange(row) {
      statusByDeptId(row.deptId).then(response => {
        if (response.code === 200) {
          this.$message.success('状态更新成功');
        } else {
          this.$message.error(response.msg);
        }
      }).catch(error => {
        this.$message.error('状态更新失败');
        console.error('Error:', error);
      }).finally(() => {
        // 不管成功还是失败，都延迟 1 秒后刷新列表
        setTimeout(() => {
          this.getList();
        }, 1000); // 1000 毫秒 = 1 秒
      });
    },
    getList() {
      // 刷新列表的方法
      listDept(this.queryParams).then(response => {
        this.deptList = response.rows;
        this.total = response.total;
      });
    }
  }
};
</script>

关键点解释

@change事件绑定：我们使用@change监听el-switch的状态变化，并将当前行数据作为参数传递给handleChange方法。
```
@change="handleChange(scope.row)"
```
处理接口响应：在handleChange方法中，首先调用statusByDeptId接口更新状态。然后根据返回的结果进行不同的处理：
- 如果response.code === 200，表示请求成功，显示成功消息。
- 否则，显示错误消息。
.finally()钩子：无论接口请求是否成功，都会进入.finally()钩子，在这里我们可以执行一些后续操作，如延迟刷新列表。
setTimeout延迟执行：为了延迟1秒执行刷新操作，我们在.finally()中使用setTimeout包裹this.getList()方法。

只有成功才刷新的变体

如果你只希望在请求成功时才刷新列表，并且同样延迟1秒，可以这样修改：

handleChange(row) {
  statusByDeptId(row.deptId).then(response => {
    if (response.code === 200) {
      this.$message.success('状态更新成功');

      // 成功后延迟 1 秒刷新
      setTimeout(() => {
        this.getList();
      }, 1000);

    } else {
      this.$message.error(response.msg);
    }
  }).catch(error => {
    this.$message.error('状态更新失败');
    console.error('Error:', error);
  });
}