element-plus开关el-switch实现是否开启定时自动刷新

适用背景：

在我们常见的后台管理端的数据列表页，通常是用户点击【查询】按钮，触发一次查询，然后数据列表更新。

现在要实现一个功能：用一个开关el-switch来实现是否开启定时刷新，例如每隔30秒刷新一次

实现思路：

1先把组件元素基础属性设置好

用的是element-plus的开关组件el-switch

<!-- 开关按钮：控制自动刷新 -->
<el-switch v-model="autoRefreshEnabled" active-text="开启自动刷新" inactive-text="关闭自动刷新"  @change="handleAutoRefreshChange"/>

2添加动作交互，用定时器实现自动刷新

// 开关状态（是否开启自动刷新）
const autoRefreshEnabled = ref(false)

// 定时器 ID（用于清理）
let refreshTimer: number | null = null

// 你要定时执行的【查询列表函数】
const getList = () => {
  // 这里写你真正的列表查询接口
}

// 开关改变时：开启/停止定时
const handleAutoRefreshChange = (val: boolean) => {
  if (val) {
    startAutoRefresh() // 打开 → 启动定时器
  } else {
    stopAutoRefresh() // 关闭 → 清除定时器
  }
}

// 启动自动刷新（每30秒一次，可改时间）
const startAutoRefresh = () => {
  if (refreshTimer) return // 防止重复开
  console.log('已开启自动刷新')
  
  // 立即刷新一次
  getList()
  
  // 循环刷新（30*1000 = 30秒）
  refreshTimer = window.setInterval(() => {
    getList()
  }, 30000)
}

// 停止自动刷新
const stopAutoRefresh = () => {
  if (refreshTimer) {
    clearInterval(refreshTimer)
    refreshTimer = null
    console.log('已关闭自动刷新')
  }
}

// 页面加载：如果默认开启，就启动
onMounted(() => {
  if (autoRefreshEnabled.value) {
    startAutoRefresh()
  }
})

3别忘了清理销毁定时器

如果没有手动关闭销毁定时器，别忘了在页面卸载时来个保险

// 页面销毁：清理定时器，避免bug
onUnmounted(() => {
  stopAutoRefresh()
})

【注】：以上刚好是我工作中遇到的小需求，分享一下思路，如果有什么疑问，欢迎小伙伴友好讨论😁