【踩坑】ant design pagination 分页器跳至页输入框清除数值

 
1、问题描述：

        最近使用 ant pagination 分页器组件，发现跳至某页后，输入框的数值默认显示跳转前页码，而且官网文档没有可直接清除数值的方法，那要怎么处理呢？

2、解决方式：

        思路：先校验跳转输入框是否有值，若有值，则在请求列表数据后，重新初始化分页器。

       1）封装方法：校验跳转输入框是否有值       

    /**
     * checkAntPageJumper 校验跳转输入框是否有值
     * @param parentClassSelector [String] 父元素类名选择器
     */
    checkAntPageJumper(parentClassSelector) {
      let jumpVal = ''
      let jumpInput = document.querySelector(`${parentClassSelector} .ant-pagination-options-quick-jumper > input`)
      if (jumpInput) {
        jumpVal = jumpInput.value
      }
      return jumpVal
    },

        2）定义标识：visiblePager 是否显示分页器组件

        3）演示代码：

<template>
  <div class="list-page">
    <ul class="list" v-if="!isLoading && list.length">
      <li v-for="(item, index) in list" :key="index">
        <span>{{ item.name }}</span>
      </li>
    </ul>
    <div v-else-if="!isLoading && !list.length">暂无数据</div>
    <div v-else>加载中</div>
    <!-- 设置pager最小高度, 避免重新渲染时页面塌陷 -->
    <div class="pager" style="min-height: 48px">
      <a-pagination v-if="!isLoading && list.length && visiblePager" show-quick-jumper @change="onChange" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isLoading: false,
      visiblePager: false,
      list: [],
      pageNum: 1,
      pageSize: 10,
    }
  },
  components: {},
  created() {},
  mounted() {
    this.getList()
  },
  methods: {
    /**
     * checkAntPageJumper 校验跳转输入框是否有值
     * @param parentClassSelector [String] 父元素类名选择器
     */
    checkAntPageJumper(parentClassSelector) {
      let jumpVal = ''
      let jumpInput = document.querySelector(`${parentClassSelector} .ant-pagination-options-quick-jumper > input`)
      if (jumpInput) {
        jumpVal = jumpInput.value
      }
      return jumpVal
    },
    onChange(current) {
      this.pageNum = current
      if (this.checkAntPageJumper('.list-page')) {
        // 分页器跳转输入框有值, 重新初始化分页器组件
        this.visiblePager = false
      }
      this.getList()
    },
    getList() {
      this.isLoading = true
      let para = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }
      this.$api
        .list(para)
        .then((res) => {
          this.list = res.data
        })
        .finally(() => {
          this.isLoading = false
          // 显示分页器组件
          this.visiblePager = true
        })
    },
  },
}
</script>
<style></style>