Descripción del problema: estoy usando el componente de página de cambio de la pestaña del elemento, y los datos son la misma interfaz utilizada para filtrar nuevos datos en la página de cambio. Al cambiar a la página siguiente, los datos anteriores parpadearán. Lo sé Es debido a la demora de la interfaz de solicitud que se pueden ver los datos anteriores
Solución: al cambiar de página, borre los datos antes de solicitar los datos, y no podrá ver los datos en la página anterior, y no sentirá el parpadeo
<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)
}
},