先来看一张图片,说一下需要
要求是选中秒数,定时刷新列表,间接上代码吧
<span> 定时刷新:</span>
<el-select
v-model="refres"
placeholder="请抉择"
size="small"
@change="shuaxin"
>
<el-option
v-for="item in refresh"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
export default {data () {
return {
refresh: [{
value: '1',
label: '30 秒'
}, {
value: '2',
label: '1 分钟'
}, {
value: '6',
label: '3 分钟'
}, {
value: '10',
label: '5 分钟'
}],
refres: '1',
timer: null, // 定时器的名字
}
}
}
上面开始写办法
methods: {shuaxin (v) {
// 每次定时器开启前 先革除之前的定时器
if (this.timer) {clearInterval(this.timer)
}
this.timer = setInterval(() => {
// 获取列表
console.log('这是最新的')
this.getList()}, Number(v) * 30000)
}
},
// 当然别忘了在页面销毁的时候革除定时器
destroyed () {clearInterval(this.timer)
},
以上就是 select 下拉框 change 事件中设置定时器 的做法了,哪里有问题欢送指导