vue实现表格分页功能

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

直接上代码:

这里是这里是template部分,主要由一个需要分页的表格和一个分页器组成。重点在于表格的data属性用到了一个slice截取方法。

<el-table
        v-loading="listLoading"
        :data="
          list.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        element-loading-text="Loading"
        highlight-current-row
        border
      >
        <el-table-column align="center" label="序号" width="90">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="头像" align="center" width="150">
          <template slot-scope="scope">
            <el-avatar :src="scope.row.avatar"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column align="center" label="UID" width="130">
          <template slot-scope="scope">
            {{ scope.row.UID }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="用户名" width="350">
          <template slot-scope="scope">
            {{ scope.row.username }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="游戏ID" width="350">
          <template slot-scope="scope"> {{ scope.row.usernick }} </template>
        </el-table-column>
        <el-table-column label="授权类型" width="110" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.authorizationType | tagTypeFilter">{{
              scope.row.authorizationType | authorizationTypeFilter
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="成功邀请人数" width="150">
          <template slot-scope="scope">{{ scope.row.successNum }} </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="change(scope.$index, scope.row)"
            >
              修改
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <!-- 分页器 -->
      <div class="block" style="margin-top: 15px">
        <el-pagination
          align="right"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next,total"
          background
          :total="filterList.length"
          hide-on-single-page
        >
        </el-pagination>
</div>

这里是javascript部分:

export default{
    data(){
        return{
            currentPage:1//当前页码
            pageSize:10//每页显示条数
            list:[]//要显示的表格数据
             }
        }

    methods{
            handleCurrentChange(val) {
            this.currentPage = val;
        },
    }

}

实现如图效果

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

(0)

相关推荐

  • Vue+ElementUI table实现表格分页

    Vue+ElementUI table表格分页,供大家参考,具体内容如下 分页的两种方式.前端分页,后端分页.两种方式各有个的优缺点吧. 前端分页:后台只需将数据返回,不需要做过多处理,前端一次请求拿到所有数据后做分页处理.但数据量不能太大,因为前端是先一次性加载所有数据,然后在做分页处理.在数据量多的情况下,加载相对应的会变慢.所有在前端做分页时要先考虑一下后期的数据量. 后端分页:因为是后端分页,前端在每点击一次分页时,便向后台请求一次数据.其实就是避免前端一次性从数据库获取大量数据 一.在

  • Vue+Element UI+Lumen实现通用表格分页功能

    前言 最近在做一个前后端分离的项目,前端使用 Vue+ Element UI,而后端则使用 Lumen 做接口开发,其中分页是必不可少的一部分,本文就介绍如何基于以上环境做一个简单.可复用的分页功能. 先说后端 后端做的事情不多,只需要接受几个参数,根据参数来获取数据即可. 需要获取的参数如下: pageSize(一页数据的数量) pageIndex(第几页的数据) 然后就可以根据这两个参数计算出偏移量,再从数据库中取出相应的数据. 假如现在给出的参数为:pageSize=10,pageInde

  • 基于Vue.js的表格分页组件

    一.Vue.js简介 1.Vue的主要特点: (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化 (1) 简洁 下面看一段Angular的实现双向绑定的代码 // html <body ng-app="myApp"> <div ng-controller="myCtrl"> <p>{{ note }}</p> <input type="text" ng-

  • Vue2.0+ElementUI+PageHelper实现的表格分页功能

    前言 最近做了一些前端的项目,要对表格进行一些分页显示.表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即前端分页)的做法是将数据全部缓存,然后分页显示,这样在数据量较大的时候会对浏览器的速度产生影响,所以考虑之后我使用了后端分页,后端分页的特点是对当前页的数据进行请求,每次当页码变化或者每页数据量变化的时候,就重新发一次请求.这里所用到的技术主要有以下几种: Spring SpringMVC Mybatis VueJS 2.0 ElementUI 后端数据库用的是Mys

  • vue.js表格分页示例

    分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 效果: 代码: 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //页码点击事件 btnClick: function(index){ if(index != this.cu

  • Vue Cli与BootStrap结合实现表格分页功能

    1.首先需要在vue-cli项目中配置bootstrap,jquery 2. 然后新建vue文件,如index.vue,index.vue内容如下: 3.配置路由即可运行实现. <template> <div class="tTable container body-content"> <div class="form-group"> <div class="form-group"> <div

  • vue.js 表格分页ajax 异步加载数据

    Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //页码点击事件 btnClick: f

  • 利用vue + element实现表格分页和前端搜索的方法

    前言 ElementUI是饿了么前端开源的一个基于Vue的前端框架,已经帮我们封装好了一系列功能性的组件,比如栅格系统.表格.表单.树形菜单.通知等.对于搞后台管理界面的项目,特别是不需要考虑兼容ie8.ie9以下的项目.ElementUI是一个不错的选择. 而且ElementUI的文档写得十分详尽,参照demo可以很快上手. 本文主要介绍了关于vue + element实现表格分页和前端搜索的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 实现思路 1.前端后台管理

  • Javascript vue.js表格分页,ajax异步加载数据

    分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 效果: 代码: 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //页码点击事件 btnClick: function(index){ if(index != this.cu

  • vue实现表格分页功能

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

  • php实现的后台表格分页功能示例

    本文实例讲述了php实现的后台表格分页功能.分享给大家供大家参考,具体如下: <?php //init.php $conn = mysqli_connect('127.0.0.1','root','','xz',3306); $sql = "SET NAMES UTF8"; mysqli_query($conn,$sql); $pagecount = 3; ?> user.php: <?php //用户管理 echo "用户管理<br/>&quo

  • angularjs表格分页功能详解

    接上一次,这次主要介绍表格分页功能,由于项目需要这个案例是关于前端分页的方式,现在很少会这么用了,但如有需要可以参考其中的思路 html: 1.通过UL来展示页标,其中每个页标的li是通过异步加载从获取到不同的表格数据来动态生成的. <div class="pagination"> <ul style="float:right"> <li id="previous"><a href=""

  • vxe-table vue table 表格组件功能

    一个功能更加强大的 Vue 表格组件 查看vxe-table 功能点 •基础 •尺寸 •斑马线条纹 •带边框 •单元格样式 •列宽拖动 •流体高度 •固定表头 •固定列 •固定表头和列 •表头分组 •序号 •单选 •多选 •排序 •筛选 •合并行或列 •表尾合计 •导出 CSV •显示/隐藏列 •加载中 •格式化内容 •自定义模板 •快捷菜单 •滚动渲染 •展开行 •树形表格 •可编辑表格 •数据校验 •全键盘操作 •Excel 表格 例子 <template> <div> <

  • vue实现表格过滤功能

    本文实例为大家分享了vue实现表格过滤功能的具体代码,供大家参考,具体内容如下 效果: 组件代码: <template> <div> <input type="text" v-model="searchText"> <ul> <li v-for="(book, index) in filterBooks" :key="index"> 序号 : {{index}}, 书

  • vue实现表格合并功能

    本文实例为大家分享了vue实现表格合并功能的具体代码,供大家参考,具体内容如下 1.背景 本身有vue进行渲染的数据表格,,但是出于整体考虑,需要对相同的列信息进行单元格合并. 由于使用的是vue,想到MVVM是要用数据驱动的思想,所以考虑在Model做手脚,而不是渲染出数据来后做DOM操作,当然基本的CSS还是要有的.因此这个方法对所有 数据驱动的框架都有效,比如说Angular和React.最后的实现效果是这样的: 2.思路 原本的正常表格是这样的: <table > <thead&

  • vue iview实现分页功能

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

随机推荐