Cambiar problema de parpadeo de datos de formulario de página

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)
      }
    },

 

Supongo que te gusta

Origin blog.csdn.net/weixin_70563937/article/details/130884053
Recomendado
Clasificación