美文网首页
element-ui分页组件修改当前页current-page,

element-ui分页组件修改当前页current-page,

作者: rick_zhu | 来源:发表于2022-12-08 14:58 被阅读0次

    1.当正常在methods方法中修改current-page后,视图上还是没改变

    :current-page.sync="current"
    

    增加一个.sync这样会生效

    2.mounted中修改current-page后,视图上还是没改变

    // 视图不更新情况
    <el-pagination
              :current-page.sync="currentPage"
              :page-size="pageSize"
              :layout="layout"
              :total="total"
              @current-change="numClick"
              @prev-click="prevClickHandle"
              @next-click="nextClickHandle"
            >
    </el-pagination>
     mounted () {
      this.currentPage = 2
    }
    

    比如:


    image.png

    不能自动变为:


    image.png

    解决办法是添加唯一key强制组件刷新:

    // 添加key
    <el-pagination
          :key="elementui_page_component_key"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :layout="layout"
          :total="total"
          @current-change="numClick"
          @prev-click="prevClickHandle"
          @next-click="nextClickHandle"
        >
    </el-pagination>
     mounted () {
      // 修改页码
      this.currentPage = 2
      // 强制组件刷新
      this.elementui_page_component_key++
    }
    

    相关文章

      网友评论

          本文标题:element-ui分页组件修改当前页current-page,

          本文链接:https://www.haomeiwen.com/subject/wukafdtx.html