VUE中iview table组件和page分页组件简单组合使用

拼搏现实的明天。 2023-06-20 15:56 19阅读 0赞

本文转自： [https://segmentfault.com/a/1190000010392169][https_segmentfault.com_a_1190000010392169]

> 最近在iview交流群里，有人问过分页怎么使用？iview的列表示例里面暂时还未有列表和分页的组合，所以暂时做了一个简单列表和简单分页的组合，供大家参考。

## 模板 ##

## 准备数据 ##

{
                    "username": "智能审批",
                    "shenpistatus": "审批已通过",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-24 18:11"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批已通过",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-24 18:11"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批已通过",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-24 10:04"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "  收入 > 999 && 支出 < 201",
                    "time": "2017-07-24 10:03"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "  收入 > 999 && 支出 < 201",
                    "time": "2017-07-24 10:02"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批已通过",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-24 10:02"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-24 10:01"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-24 09:56"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-21 14:23"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "  收入 > 999 && 支出 < 201 && 所有项目的总净收入 > 5000",
                    "time": "2017-07-21 14:23"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-21 14:23"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "  收入 > 999 && 支出 < 201 && 所有项目的总净收入 > 5000",
                    "time": "2017-07-21 14:23"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "  收入 > 999 && 支出 < 201 && 所有项目的总净收入 > 5000",
                    "time": "2017-07-21 14:23"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "  收入 > 999 && 支出 < 201 && 所有项目的总净收入 > 5000",
                    "time": "2017-07-21 14:21"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-21 14:21"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-21 14:20"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "  收入 > 999 && 支出 < 201 && 所有项目的总净收入 > 5000",
                    "time": "2017-07-21 14:20"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-21 14:14"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-21 14:13"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-21 14:11"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-21 14:10"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "  收入 > 999 && 支出 < 201 && 所有项目的总净收入 > 5000",
                    "time": "2017-07-20 18:09"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "  收入 > 999 && 支出 < 201 && 所有项目的总净收入 > 5000",
                    "time": "2017-07-20 18:08"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "  收入 > 999 && 支出 < 201 && 所有项目的总净收入 > 5000",
                    "time": "2017-07-20 18:08"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-20 18:07"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-20 18:05"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批已通过",
                    "shenpicomments": "wedfqw",
                    "time": "2017-07-20 15:50"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批已通过",
                    "shenpicomments": "wedfqw",
                    "time": "2017-07-20 15:20"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-19 18:27"
                }

## 数据处理 ##

*  首先对列表的数据进行处理，显示多少条
 *  然后对分页处理，当点击分页的时候，返回值一个数值，然后通过数值从数据里筛选数据
 *  把筛选出来的数据再给列表绑定的model赋值即可

### model部分 ###

data () {
                return {
                    ajaxHistoryData:[],
                    // 初始化信息总条数
                    dataCount:0,
                    // 每页显示多少条
                    pageSize:10,
                    historyColumns: [
                        {
                            title: '人员',
                            key: 'username'
                        },
                        {
                            title: '操作',
                            key: 'shenpistatus'
                        },
                        {
                            title: '意见',
                            key: 'shenpicomments'
                        },
                        {
                            title: '时间',
                            key: 'time'
                        }
    
                    ],
                    historyData: []
                }
            }

### 处理部分 ###

methods:{
                // 获取历史记录信息
                handleListApproveHistory(){
                    
                    // 保存取到的所有数据
                    this.ajaxHistoryData = testData.histories
                    this.dataCount = testData.histories.length;
                    // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
                    if(testData.histories.length < this.pageSize){
                        this.historyData = this.ajaxHistoryData;
                    }else{
                        this.historyData = this.ajaxHistoryData.slice(0,this.pageSize);
                    }
                        
                   
                },
                changepage(index){
                    var _start = ( index - 1 ) * this.pageSize;
                    var _end = index * this.pageSize;
                    this.historyData = this.ajaxHistoryData.slice(_start,_end);
                }
            },
            created(){
                 this.handleListApproveHistory();
            }

## 效果图 ##

![点击第三页][format_png]

![点击第一页][format_png 1]

### 下面是完整的Vue代码 仅供大家参考 ###

<template>
        <div>
          <Table :columns="historyColumns" :data="historyData"></Table>
          <Page :total="dataCount" :page-size="pageSize" show-total class="paging" @on-change="changepage"></Page>
        </div>
    </template>
    <style scoped>
      .paging{
          float:right;
          margin-top:10px;
      }
    </style>
    <script>
        let testData = {
            "histories": [
                {
                    "username": "智能审批",
                    "shenpistatus": "审批已通过",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-24 18:11"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批已通过",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-24 18:11"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批已通过",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-24 10:04"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "  收入 > 999 && 支出 < 201",
                    "time": "2017-07-24 10:03"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "  收入 > 999 && 支出 < 201",
                    "time": "2017-07-24 10:02"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批已通过",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-24 10:02"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-24 10:01"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-24 09:56"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-21 14:23"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "  收入 > 999 && 支出 < 201 && 所有项目的总净收入 > 5000",
                    "time": "2017-07-21 14:23"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-21 14:23"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "  收入 > 999 && 支出 < 201 && 所有项目的总净收入 > 5000",
                    "time": "2017-07-21 14:23"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "  收入 > 999 && 支出 < 201 && 所有项目的总净收入 > 5000",
                    "time": "2017-07-21 14:23"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "  收入 > 999 && 支出 < 201 && 所有项目的总净收入 > 5000",
                    "time": "2017-07-21 14:21"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-21 14:21"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-21 14:20"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "  收入 > 999 && 支出 < 201 && 所有项目的总净收入 > 5000",
                    "time": "2017-07-21 14:20"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-21 14:14"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-21 14:13"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-21 14:11"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-21 14:10"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "  收入 > 999 && 支出 < 201 && 所有项目的总净收入 > 5000",
                    "time": "2017-07-20 18:09"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "  收入 > 999 && 支出 < 201 && 所有项目的总净收入 > 5000",
                    "time": "2017-07-20 18:08"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "  收入 > 999 && 支出 < 201 && 所有项目的总净收入 > 5000",
                    "time": "2017-07-20 18:08"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-20 18:07"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-20 18:05"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批已通过",
                    "shenpicomments": "wedfqw",
                    "time": "2017-07-20 15:50"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批已通过",
                    "shenpicomments": "wedfqw",
                    "time": "2017-07-20 15:20"
                },
                {
                    "username": "智能审批",
                    "shenpistatus": "审批被拒绝",
                    "shenpicomments": "自动审批通过",
                    "time": "2017-07-19 18:27"
                }
            ]
        }
        export default {
            data () {
                return {
                    ajaxHistoryData:[],
                    // 初始化信息总条数
                    dataCount:0,
                    // 每页显示多少条
                    pageSize:10,
                    historyColumns: [
                        {
                            title: '人员',
                            key: 'username'
                        },
                        {
                            title: '操作',
                            key: 'shenpistatus'
                        },
                        {
                            title: '意见',
                            key: 'shenpicomments'
                        },
                        {
                            title: '时间',
                            key: 'time'
                        }
    
                    ],
                    historyData: []
                }
            },
            methods:{
                // 获取历史记录信息
                handleListApproveHistory(){
                    
                    // 保存取到的所有数据
                    this.ajaxHistoryData = testData.histories
                    this.dataCount = testData.histories.length;
                    // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
                    if(testData.histories.length < this.pageSize){
                        this.historyData = this.ajaxHistoryData;
                    }else{
                        this.historyData = this.ajaxHistoryData.slice(0,this.pageSize);
                    }
                        
                   
                },
                changepage(index){
                    var _start = ( index - 1 ) * this.pageSize;
                    var _end = index * this.pageSize;
                    this.historyData = this.ajaxHistoryData.slice(_start,_end);
                }
            },
            created(){
                 this.handleListApproveHistory();
            }
        }
    </script>

[https_segmentfault.com_a_1190000010392169]: https://segmentfault.com/a/1190000010392169
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zZWdtZW50ZmF1bHQuY29tL2ltZy9iVlJMQ2s?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zZWdtZW50ZmF1bHQuY29tL2ltZy9iVlJMQ3g?x-oss-process=image/format,png