Vue项目中setInterval定时器的使用
在Vue项目中,需要设置一个定时器,对从后台获取到的表格的数据进行1s的定时刷新。
·
问题
在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>
更多推荐
已为社区贡献4条内容
所有评论(0)