Vue项目中setInterval定时器的使用

最新推荐文章于 2024-04-12 09:57:53 发布

肖小周

最新推荐文章于 2024-04-12 09:57:53 发布

阅读量3.6k

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43181470/article/details/126281648

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

问题

在Vue项目中，需要设置一个定时器，对从后台获取到的表格的数据进行1s的定时刷新

代码

在mounted函数中设置setInterval定时器，在函数体中去调用请求数据的函数
在beforeDestory函数中设置clearInterval去清除定时器
然后还有一个loading的效果，通过给el-table设置v-loading自定义指令，当页面挂载完毕第一次调用initData()时，loading为true，后边再定时刷新的时候，就不再显示loading效果，loading为false

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column prop="name" label="姓名" align="center">
      </el-table-column>
      <el-table-column prop="gender" label="性别" align="center">
      </el-table-column>
      <el-table-column prop="age" label="年龄" align="center">
      </el-table-column>
      <el-table-column prop="date" label="日期" align="center">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import { getList } from "@/api/list";
  export default {
    name:'Sku',
    data() {
      return {
        tableData:[],
        timer: null,
        loading: false
      }
    },
    mounted(){
      this.initData(0)
      this.timer = setInterval(() => {
        this.initData(1)
      }, 1000);
    },
    beforeDestroy(){
      clearInterval(this.timer)
      this.timer = null
    },
    methods:{
      async initData(type = 0){
        if (!type) {
          this.loading = true
        }
        const res = await getList()
        this.tableData = res.data
        this.loading = false
      }
    }
  }
</script>