vue+antd分页组件闪动

vue+antd分页组件闪动

前言

今天记录的是一个经常使用但又不常出现（忽视）的问题解决办法。

在使用Vue + antd 开发管理系统的时候，应该使用到 Drawer 抽屉 和 Pagination（分页）功能，在开发过程中出现一个匪夷所思的问题，就是分页居右触发pageSize切换器的时候，会导致 Pagination 分页出现抖动的问题，那这是什么原因导致的呢？

问题

分页组件出现闪烁

解决办法

经过多次触发测试，发现是切换器出现的瞬间把底部给撑开了，自然就出现了闪烁的问题，那么问题是找到了，怎么解决呢。

经过一番折腾，最后还是让我给找到解决的办法，就是在弹框模型中添加一个根节点，给这个根节点设置样式overflow:hidden 即可

代码

关键代码 给跟元素添加 overflow: 'hidden'

<template>
  <a-drawer
    title="系统通知"
    width="700px"
    :bodyStyle="{
      height: 'calc(100% - 55px)',
      padding: '20px',
      overflow: 'hidden' // 关键代码
    }"
  >
    <div class="system-notification-collapse">
    </div>
    <div>
        <a-pagination
          @change="changePagination"
          :total="100"
          :show-total="(total) => `共 ${tableData.total} 条`"
          :page-size="10"
          v-model:current="1"
          show-size-changer
          show-quick-jumper
        />
    </div>
  </a-drawer>
</template>