vue iview table組件和page組件簡單組合使用

時間 2019-11-08

標籤 vue iview table 組件 page 簡單組合使用简体版

原文原文鏈接

最近在iview交流羣裏，有人問過度頁怎麼使用？iview的列表示例裏面暫時還未有列表和分頁的組合，因此暫時作了一個簡單列表和簡單分頁的組合，供你們參考。ajax

模板

<template>
    <div>
      <Table :columns="historyColumns" :data="historyData"></Table>
      <Page :total="dataCount" :page-size="pageSize" show-total  @on-change="changepage"></Page>
    </div>
</template>

準備數據

{
                "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"
            }

數據處理

首先對列表的數據進行處理，顯示多少條iview
而後對分頁處理，當點擊分頁的時候，返回值一個數值，而後經過數值從數據裏篩選數據學習
把篩選出來的數據再給列表綁定的model賦值便可this

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();
        }

效果圖

下面是完整的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>