zoukankan      html  css  js  c++  java
  • Elementui分页组件查询时不触发currentchange

    先操作element分页,切换到第二页,然后操作。

    从代码中强制将current-page强制设置为1

    (即重新查询数据,并将当前页重置为第1页)此时画面显示是对的,

    分页组件已经将第1页的页码数字激活了然后点击第2页数字,进行换页画面显示也是对的,第2页数字变成激活状态,

    但是此时竟然无法触发current-change事件

    原因

    使用this.pagination.currentPage = val,强制改变分页页数以及样式,没法完全重置分页组件

    解决方案

    data里面初始化paginationShow为true

    <el-pagination v-if="paginationShow"

    @current-change="handleCurrentChange"

    :current-page.sync="pagination.currentPage"

    :page-size="pagination.size"

    layout="total, prev, pager, next, jumper"

    :total="pagination.total">

    </el-pagination>

    然后使用v-if强制刷新组件即可,组件声明改成

    search () {

    this.paginationShow = false

    this.handleCurrentChange(1)

    this.$nextTick(function () {

    this.paginationShow = true;

    })

    },

    paginationShow = true,重新显示分页,必须放到$nextTick,画面刷新完毕后,不然无效果

    handleCurrentChange(val) {

    let _this = this;

    _this.pagination.currentPage = val;

    }

    原文转自:https://blog.csdn.net/baidu_38305286/article/details/80054002

  • 相关阅读:
    高并发系统中的常见问题
    区块链需要解决诸多问题
    什么是“区块链”技术
    github源码开源区块链浏览器
    JavaScript 内存
    行为驱动开发(BDD)
    Vue.js
    Net程序员学习Linux
    Mybatis数据操作
    Metatable和Metamethod(转)
  • 原文地址:https://www.cnblogs.com/akunz/p/9722884.html
Copyright © 2011-2022 走看看