本文实例为大家分享了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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 基于vue框架怎样实现水平时间轴，思路及方法是什么

  本文主要介绍了vue实现两列水平时间轴的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• vue RSA加密相关代码

  本文主要介绍了vue前端RSA加密java后端解密的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• React导出Excel的实现方式是什么，csv与Excel啥区别

  这篇文章主要为大家介绍了React.js前端导出Excel的方式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

• Npm和Node.JS的升级操作是怎样的

  前提电脑中已经安装过NodeJS， npm。现在需要进行升级操作。1、查看当前的npm和NodeJs的版本：C:\Users\Administrator>node-vv4.4.3C:\Users\Administrator>npm-version2.15.1 2、升级npm：C:\Users\Administrator>npminstallnpm-gC:\Pr

• vue中router传参方式有什么？刷新页面数据丢失怎样解决？

  这篇文章我们主要了解关于vue中router传参方式，本文有示例代码供大家参考，感兴趣的朋友可以了解看看，另外本文还分享了刷新页面数据丢失的解决方法，接下来我们一起了解看看吧。