本文实例为大家分享了vue iview实现分页功能的具体代码，供大家参考，具体内容如下

子组件

<template>
  <div style="margin-top: 30px;">
    <Page
      :total="paginations.total"
      show-elevator
      show-sizer
      :page-size="paginations.pageSize"
      :show-total="paginations.showTotal"
      :page-size-opts="paginations.pageSizeOpts"
      :current="paginations.current"
      @on-change="changepage"
      @on-page-size-change="pageSizeChange"
    ></Page>
  </div>
</template>
 
<script>
export default {
  name: "page",
  props: {
    paginations: {
      type: Object,
      default: {}
    }
  },
  methods: {
    changepage(index) {
      this.$emit("changepage", index);
    },
    pageSizeChange(index) {
      this.$emit("pageSizeChange",index);
    }
  }
};
</script>
 
<style>
</style>

父级件

/*
 * @Author: mikey.zhaopeng 
 * @Date: 2019-09-17 10:42:28 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2019-09-20 16:06:10
 机主流量记录
 */
 
<template>
  <div id="news">
    <Form :model="serach_data">
      <Row>
        <Col span="3">
          <FormItem>
            <Input v-model="serach_data.Nickname" placeholder="姓名"></Input>
          </FormItem>
        </Col>
        <Col span="3" style="margin-left:1%;">
          <FormItem>
            <Input v-model="serach_data.customerNumber" placeholder="编号"></Input>
          </FormItem>
        </Col>
        <Col span="3" style="margin-left:1%;">
          <Button type="primary" size="default" icon="ios-search" @click="onSerach"></Button>
        </Col>
      </Row>
    </Form>
    <Table border :columns="columns6" :data="tableData"></Table>
    <pageItem
      :paginations="{...paginations}"
      @changepage="changepage"
      @pageSizeChange="pageSizeChange"
    />
  </div>
</template>
 
<script>
import pageItem from "@/common/PageItem";
import { publicMethod } from "@/common/utils/public";
import { CustomerModule } from "@/utils/api";
export default {
  name: "userInfo",
  components: {
    pageItem
  },
  data() {
    return {
      paginations: {
        // 初始化信息总条数
        total: 15,
        // 每页显示多少条
        pageSize: 15,
        // 每页条数切换的配置
        pageSizeOpts: [15, 30, 45, 60, 75],
        current: 1, //当前位于哪页
        showTotal: true
      },
      serach_data: {
        Nickname: "", //昵称
        customerNumber: "" //用户编号
      },
      columns6: [
        {
          title: "编号",
          key: "Id",
          width: 100
        },
        {
          title: "昵称",
          width: 160,
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  display: "flex",
                  alignItems: "center"
                }
              },
              [
                h("img", {
                  style: {
                    marginRight: "10px",
                    width: "30px",
                    display: "inline-block",
                    borderRadius: "50%"
                  },
                  attrs: {
                    src: params.row.Avatar, //头像
                    style: "width: 100px;height: 30px"
                  }
                }),
                h("div", [
                  h(
                    "div",
                    {
                      style: {
                        marginRight: "5px",
                        height: "15px"
                      }
                    },
                    params.row.FullName //昵称
                  )
                ])
              ]
            );
          }
        },
        {
          title: "变动类型", //0.初始化 1.使用 2.充值 3.管理员调整
          key: "VolumeType",
          render: (h, params) => {
            // console.log(params.row);
            let VolumeType = "";
            switch (params.row.VolumeType) {
              case 0:
                VolumeType = "初始化";
                break;
              case 1:
                VolumeType = "使用";
                break;
              case 2:
                VolumeType = "充值";
                break;
              case 3:
                VolumeType = "管理员调整";
                break;
            }
 
            return h(
              "div",
              {
                style: {
                  display: "flex",
                  alignItems: "center"
                }
              },
              VolumeType
            );
          }
        },
        {
          title: "变动流量",
          key: "UseVolume"
        },
        {
          title: "变动后总流量",
          key: "BalanceVolume"
        },
        {
          title: "变动时间",
          key: "AddTime",
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  display: "flex",
                  alignItems: "center"
                }
              },
              publicMethod.getTimeData(params.row.AddTime)
            );
          }
        }
      ],
      allTableData: [], //所有表单数据
      tableData: []
    };
  },
  methods: {
    getPageList(pageIndex = 1, pageSize = 15) {
      let serachVal = this.serach_data;
      let datas = {
        nickname: serachVal.Nickname,
        customerNumber: serachVal.customerNumber,
        pageIndex: pageIndex,
        pageSize: pageSize
      };
      console.log(datas);
      CustomerModule.getCusVolumeLogList(datas).then(res => {
        let { Data } = res.data;
        console.log(Data);
        this.tableData = Data.data;
        this.paginations.total = Data.total;
      });
    },
    onSerach() {
      //搜索数据
      this.getPageList();
    },
 
    //切换当前页
    changepage(page) {
      this.paginations.current = page;
      this.getPageList(page, this.paginations.pageSize);
    },
    //切换每页条数时的回调，返回切换后的每页条数
    pageSizeChange(page_size) {
      this.paginations.current = 1; //当前页
      this.paginations.pageSize = page_size; //所点击的条数,传给一页要显示多少条
      this.getPageList(this.paginations.current, page_size);
    }
  },
  mounted() {
    this.getPageList();
  },
  created() {
    this.$store.commit("base/updateBreadcumb", {
      module: [{ name: "机主" }],
      list: [{ name: "机主流量记录", path: "" }]
    });
  }
};
</script>
 
<style lang="less" scoped>
// 模态框
.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;
 
  .ivu-modal {
    top: 0;
  }
}
</style>

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Angular路由配置是怎样，预加载和懒加载有何用

  本篇文章带大家了解一下Angular中的路由配置，简单介绍一下预加载配置、懒加载配置，希望对大家有所帮助！

• 如何理解node.js异步生成器，要点有哪些

  这篇文章主要给大家介绍了关于Node.js中异步生成器与异步迭代的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• 前端跨域问题什么情况出现，具体该怎样解决

  这篇文章主要为大家介绍了前端跨域浏览器设置解决前端跨域问题的方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

• JavaScript中循环方法有哪些，你知道几个？

  js中的循环方法有哪些？关于在JavaScript 中的遍历循环的方法很多，下面给大家分享的是for循环、for...in循环、for...of循环、foreach(...)、some(...)、every(...)这六种循环，感兴趣的朋友可以参考学习。

• jQuery获得与失去焦点事件的方法是什么？

  这篇文章我们来了解jQuery获得与失去焦点事件的方法，在网站中如果存在一些让用户填写内容的表单元素，那么我们能通过焦点事件和失去焦点事件，来给用户作出一些提示的内容。那么jQuery是如何实现获得与失去焦点事件的呢？接下来就跟随小编来一起学习一下吧！