weixin_45657461 2019-11-21 17:25 采纳率: 11.1%
浏览 712

vue+iview分页输入页码跳转问题?

这是我得父组件

<template>
  <div class="table-wrap">
    <Table
      ref="table"
      :data="arrList"
      :columns="currColumns"
      :loading="loading"
      no-data-text="暂时没有数据"
      @on-selection-change="handleSelectChange"
    ></Table>

    <div class="table-page" v-show="pageable">
      <!-- <span>{{ page.currPageSize }}</span> -->
      <Page
        :total="page.currTotal"
        :current="page.currCurrent"
        show-total
        show-elevator
        transfer
        :page-size-opts="[10,20,30]" @on-page-size-change="pagesizechange" show-sizer
        placement="top"
        @on-change="pageChange"
      >
        <span style="">共{{ page.currTotal }}条</span>
        <span>{{ pageNum }} 条 / 页  共{{page.totalPageCount}}页</span>
      </Page>
    </div>
  </div>
</template>

<script>
export default {
  name: "dtTable",
  props: {
    url: String,
    params: {
      type: Object,
      default() {
        return {};
      }
    },
    columns: {
      type: Array,
      default() {
        return [];
      }
    },
    pageable: {
      type: Boolean,
      default: true
    }
  },

  data() {
    return {
      loading: false,
      currUrl: this.url,
      currParams: this.params,
      currColumns: this.columns,
      arrList: [],
      page: {
        currTotal: 0,
        currCurrent: 1,
        currPageSize: 10,
        totalPageCount:1,
      },
      selection: [],
      pageNum: "",
      tableResult: ""
    };
  },
  watch: {
    arrList(val) {
      this.pageNum = val.length;

    },
    params(val) {
      this.currParams = val;
      this.getList();
    }
  },
  computed: {},
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.selection = [];
      this.loading = true;

      var param = Object.assign({}, this.currParams, {
        pageNo: this.page.currCurrent,
        pageSize: this.page.currPageSize
      });
      this.$http.post(this.currUrl, param).then(res => {
        this.loading = false;
        this.arrList = res.data.list;
        this.tableResult = res.data;

        //  this.arrList = res.data;
        if( Number(res.data.totalCount) == "NaN"){
          this.page.currTotal = 0;
        }else{
           this.page.currTotal = Number(res.data.totalCount);
           console.log(this.page.currTotal);
           this.page.totalPageCount = Number(res.data.totalPageCount);
        }

        this.page.currPageSize = Number(res.data.list.length);


      });
    },
    pageChange(num) {
      this.page.currCurrent = num;
      this.getList();
    },
    pagesizechange(pageSize){
      this.page.currPageSize = pageSize;
      this.getList();
    },
    handleSelectChange(selection) {
      this.selection = selection;
    },
    // 返回选中数组,默认是id
    getSelect(key = "id") {
      return this.selection.map(item => item[key]);
    }

  },


activated() {
    // isUseCache为false时才重新刷新获取数据
    // 因为对list使用keep-alive来缓存组件,所以默认是会使用缓存数据的         
    if(!this.$route.meta.isUseCache){            
        this.arrList = []; // 清空原有数据
        this.getList(); // 这是我们获取数据的函数
    } 
},
};
</script>

<style lang="less" scoped>
.table-wrap {
  padding: 0px 20px;
  .table-page {
    text-align: right;
    padding: 20px 0px;
  }
}
</style>

子组件

<dt-table ref="table" url="/findTShopInfoTies" :params="params" :columns="columns" @on-selection-change="handleSelectChange"></dt-table>

输入页码
图片说明

不管输入几都变为1

  • 写回答

2条回答 默认 最新

  • Kuukiliselessness 2019-11-22 09:50
    关注

    这样试试呢?

    pageChange(num) {
        this.$set(this.page, 'currCurrent', num)
        this.getList();
    },
    
    评论

报告相同问题?

悬赏问题

  • ¥15 MATLAB yalmip 可转移负荷的简单建模出错,如何解决?
  • ¥15 数学的三元一次方程求解
  • ¥20 iqoo11 如何下载安装工程模式
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?