如何在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-switchv-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>

關鍵點解釋

1. @change事件綁定：我們使用@change監聽el-switch的狀態變化，并將當前行數據作為參數傳遞給handleChange方法。

   @change="handleChange(scope.row)"
   

2. 處理接口響應：在handleChange方法中，首先調用statusByDeptId接口更新狀態。然后根據返回的結果進行不同的處理：

   • 如果response.code === 200，表示請求成功，顯示成功消息。
   • 否則，顯示錯誤消息。

3. .finally()鉤子：無論接口請求是否成功，都會進入.finally()鉤子，在這里我們可以執行一些后續操作，如延遲刷新列表。

4. 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);});
}

注意事項

• 避免重復綁定事件：確保@change事件只綁定一次，以防止多次觸發導致狀態管理混亂。
• 優化用戶體驗：你可以考慮在調用接口前顯示一個加載中的提示，接口完成后隱藏它，讓用戶知道操作正在進行中。
• 回滾狀態：如果需要在請求失敗時保持開關狀態不變，可以在.catch()中回滾開關的狀態。

總結

通過上述方法，我們可以輕松實現在Vue項目中結合Element UI的el-switch組件進行狀態切換后的延遲刷新列表功能。無論是統一處理成功和失敗的情況，還是僅在成功時執行特定邏輯，都可以靈活調整代碼以滿足業務需求。

希望這篇文章能幫助你在遇到類似問題時找到合適的解決方案，并加深對Vue及Element UI組件使用的理解。如果有任何疑問或者想要了解更多相關內容，請留言交流！