Ant Design of Vue 表格分页处理

最新推荐文章于 2023-10-16 16:41:53 发布

My&Liu

最新推荐文章于 2023-10-16 16:41:53 发布

阅读量550

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46166771/article/details/126001035

版权

//html
 <a-table
          ref="table"
          size="small"
          rowKey="id"
          bordered
          :loading="loading"
          class="j-table-force-nowrap"
          :columns="columns"
          :scroll="{ x: 900, y: 309 }"
          :dataSource="dataSource"
          @change="handleTableChange"
          :pagination="ipagination"
        >

//data 
ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      }, 

//方法
handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
      }
      this.ipagination = pagination
      this.MzDailyDTbas()
    },
    MzDailyDTbas(val) {
      let that = this
      let params = {}
      that.loading = true

      if (val) {
        that.isStall = val
      }
      params = that.isStall
      params.pageNo = this.ipagination.current
      params.pageSize = this.ipagination.pageSize
      console.log(params)
      getAction(that.url.listOrderDetail, params)
        .then(res => {
          that.loading = false
          if (res.success) {
            that.initSumArry(res.result)
            that.dataSource = res.result.records
            that.ipagination.total = res.result.total
          } else {
            that.$error({ title: '统计失败', content: res.message })
          }
        })
        .finally(() => {
          that.loading = false
        })
    },