el-pagination的@size-change事件和@current-change冲突,导致切换每页显示条数时,偶尔会出现无数据的情况

无数据的情况一般是currentPage超过了实际的页码数量,后端当然返回空数据。

原因

切换每页显示条数时,会触发@size-change事件,但是同时也出发了current-change事件。所以可能是因为current-change又把currentPage设置为了不合理的页码。所以我们可以通过setTimeout来让@size-change事件晚一点触发:

handleSizeChange: function(val) {
      setTimeout(() => { this.getTableData() }, 0)
    }
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过在 el-pagination 的 select 组件中增加一个选项来实现显示所有数据的功能。具体操作如下: 1. 在 el-pagination 中添加一个带有 "显示全部" 选项的 select 组件: ```html <el-pagination :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"> <span slot="sizes" class="page-size-select"> <el-select v-model="pageSize" size="small"> <el-option label="10 条/页" value="10"></el-option> <el-option label="20 条/页" value="20"></el-option> <el-option label="50 条/页" value="50"></el-option> <el-option label="100 条/页" value="100"></el-option> <el-option label="显示全部" value="all"></el-option> </el-select> </span> </el-pagination> ``` 2. 在 el-table 中根据选中的每页条数显示数据: ```html <el-table :data="tableData" :row-key="row => row.id" v-loading="loading" :max-height="maxHeight"> <!-- el-table-column 组件定义表格列 --> <el-table-column prop="id" label="ID" width="80"></el-table-column> <el-table-column prop="name" label="姓名" width="120"></el-table-column> <el-table-column prop="age" label="年龄" width="80"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> ``` 3. 在 Vue 实例中根据 pageSize 的值来决定显示数据: ```javascript new Vue({ el: '#app', data: { tableData: [], total: 0, pageSize: 10, loading: false, maxHeight: 500 }, methods: { handleSizeChange(size) { this.pageSize = size this.getTableData() }, handleCurrentChange(page) { this.getTableData() }, getTableData() { this.loading = true // 根据 this.pageSize 的值来决定需要请求的数据条数 const limit = this.pageSize === 'all' ? this.total : this.pageSize // 发送请求获取数据,此处省略 // ... this.loading = false } }, mounted() { // 初始化获取数据 this.getTableData() } }) ``` 通过以上操作,就可以在 el-pagination 中增加显示所有数据的选项,并且在 el-table 中根据选中的每页条数显示数据了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值