问题描述:我使用的是element标签页的切换页面组件,并且数据是使用的同一个接口做的切换页面筛选出新的数据,在切换到下一个页面的时候会闪烁一下之前的数据,我知道是因为请求接口的延迟所以才看的到之前的数据
解决办法:在切换页面的时候,请求到数据之前把数据清空,就看不到上一个页面的数据了,就感觉不到闪烁了
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="用户管理" name="first">表格内容</el-tab-pane>
<el-tab-pane label="配置管理" name="second">表格内容</el-tab-pane>
<el-tab-pane label="角色管理" name="third">表格内容</el-tab-pane>
<el-tab-pane label="定时任务补偿" name="fourth">表格内容</el-tab-pane>
</el-tabs>
</template>
// 切换表单
handleClick(tab: any) {
let data = JSON.parse(JSON.stringify(tab))
this.activeName = data.props.name
// (因为这里是切换页面做筛选,完成前有初始数据,把数据设置为空就看不到闪烁内容了)
// 一般是切换页面重新请求接口所以不用处理
this.tableData = []
this.getData()
},
// 获取列表数据
async getData() {
let { page, keyword, type, start_time, end_time, per_page, activeName, status } = this
// console.log(this.activeName);
const res: any = await getClue({ page, keyword, type, start_time, end_time, per_page, cate: activeName, status })
if (res.code === 1) {
this.tableData = res.data.list.data
this.total = res.data.list.total
this.per_page = res.data.list.per_page
this.cluestatus = res.data.status
} else {
ElMessage.error(res.msg)
}
},