vue iview实现分页功能

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue+iview分页组件的封装

    vue+iview的分页组件封装 1.在components中创建pagination文件夹,接着创建src,index.js,index.less文件 2.index.less文件 //需要修改的样式 .ivu-page-options { margin-left: 10px; .ivu-page-options-sizer { margin-right: 0; } } 3.index.js文件 import "./index.less"; import component from

  • vue+iview实现分页及查询功能

    vue+iview 分页及删.查功能实现 首先要想实现分页功能必须得知道 当前页码.每页大小.总数目. iview对分页的功能支持还是很强大的,有很多钩子函数 具体实现看后端返回的数据 <template> <div v-if="this.$store.state.user.userType == 0 || this.$store.state.user.userType == 1"> <Input type="text" search

  • vue iview组件表格 render函数的使用方法详解

    如果要在标签中加入属性,例如img 中src属性   a标签中href属性  此时需要用到 attrs 来加入而不是props { title: '操作', key: 'action', align: 'center', render: function (h, params) { return h('div', [ h('Button', { props: { type: 'primary', size: 'small' }, style: { marginRight: '8px' }, on

  • vue+iview 实现可编辑表格的示例代码

    先简单说明一下,这个Demo引入的vue,iview的方式是标签引入的,没有用到webpack之类的构建工具... 毕竟公司还在用angularjs+jq. 这也是我第一次写文章,大家看看思路就行了,要是有大佬指点指点就更好了 话不多说,先来个效果图 我们再看下极为简单的目录结构 IViewEditTable ## vue+iview 实现的可编辑表格 └── index.html ## 首页 └── js └── editTable.js ## 首页JS └── ivew ## iview相关

  • vue+iview动态渲染表格详解

    本文实例为大家分享了vue+iview 动态渲染表格(iview插件table),供大家参考,具体内容如下 效果图 (表格头部和表格主体都是动态渲染) 重要代码 <template> <Table ref="selection" v-for="(item) in entities" :columns="item.columns" :data="item.data" :border="false&qu

  • vue+iview Table表格多选切换分页保持勾选状态

    本文实例为大家分享了vue+iview Table表格多选切换分页保持勾选状态的具体代码,供大家参考,具体内容如下 第一种情况(配合后端做选中数据处理) 定义三个参数,是否为全选(isSelectAll).不是全选时选择的数据(selectObject: []).反选数据(unSelectObject:[]) HTML <Alert show-icon v-show="openTip">                           已选择              

  • vue iview实现分页功能

    本文实例为大家分享了vue iview实现分页功能的具体代码,供大家参考,具体内容如下 子组件 <template>   <div style="margin-top: 30px;">     <Page       :total="paginations.total"       show-elevator       show-sizer       :page-size="paginations.pageSize&quo

  • vue实现表格分页功能

    本文实例为大家分享了vue实现表格分页功能的具体代码,供大家参考,具体内容如下 直接上代码: 这里是这里是template部分,主要由一个需要分页的表格和一个分页器组成.重点在于表格的data属性用到了一个slice截取方法. <el-table v-loading="listLoading" :data=" list.slice((currentPage - 1) * pageSize, currentPage * pageSize) " element-l

  • Vue+ElementUI 实现分页功能-mysql数据

    目录 1.问题 2.解决 2.1分页组件 2.2获取数据库数据的函数:getData(): 2.3页面加载完成,需要请求第一页的数据 3.分析 4.结果 1.问题 当数据库中数据比较多时,就要每次只查询一部分来缓解服务器和页面的压力.这里使用elementui的 Pagination 分页 组件,配合mysql的limit语句,实现分页查询mysql数据. 下图是最基本的分页样式: 当然需要引入对应的事件,来实现页面改变就查询数据库. 2.解决 2.1分页组件 <el-pagination ba

  • vue实现简单分页功能

    本文实例为大家分享了vue实现简单的分页功能的具体代码,供大家参考,具体内容如下 <template> <div id="pages">     <div class="pages">         <div class="classInfo" v-for="(item,index) in currentPageData" :key="index">    

  • Vue+ElementUI 实现分页功能-mysql数据

    目录 1.问题 2.解决 2.1分页组件 2.2获取数据库数据的函数:getData(): 2.3页面加载完成,需要请求第一页的数据 3.分析 4.结果 1.问题 当数据库中数据比较多时,就要每次只查询一部分来缓解服务器和页面的压力.这里使用elementui的 Pagination 分页 组件,配合mysql的limit语句,实现分页查询mysql数据. 下图是最基本的分页样式: 当然需要引入对应的事件,来实现页面改变就查询数据库. 2.解决 2.1分页组件 <el-pagination ba

  • VUE+SpringBoot实现分页功能

    本文主要介绍一下 Vue + SpringBoot 中如何实现一个分页列表数据. 1.效果展示 2.VUE代码 VUE之视图定义 <el-row> <el-table :data="tableData" style="width: 100%"> <el-table-column v-for="(data,index) in tableHeader" :key="index" :prop="

  • vue+vuex+json-seiver实现数据展示+分页功能

    一丶项目分析 1.UI: 2.接口信息: 二丶项目环境 Mockjs:生成模拟数据(含中文名,以及地址) json-server:模拟后端接口 webpack-dev-server:开启服务器环境+接口代理 jquery:使用jquery的ajax拉取数据 vue+vuex:vuex负责数据交互,vue渲染页面 iviewui:ui组件,方便布局 搭建开发环境 1.基本环境 Vue起步(无cli) 安装: npm install --save Mockjs 使用: 详细API:mockjs.co

  • Vue组件BootPage实现简单的分页功能

    有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋可以移步我的上一篇文章<浅谈Vue.js>了解一下. BootPage组件简介  其实也不是啥高大上的组件了,相反确实一个简单的表格分页组件而已,主要是自己最近项目中需要一个表格分页组件,而Vue官方组件库里分页组件都功能太强大或者没有适合我的,所以就自己写了一个凑合着用,或许有人和我一样需要这样

随机推荐