切换页面表格数据闪烁问题

问题描述:我使用的是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)
      }
    },

猜你喜欢

转载自blog.csdn.net/weixin_70563937/article/details/130884053