iview-admin 之 table 动态表分页查询

(1) 创建 common-table.vue

<style lang="less">
    @import '../../styles/common.less';
    @import './components/table.less';
</style>
<template>
    <div>
      <Table :columns="historyColumns" :data="historyData"></Table>
      <Page :total="dataCount" :page-size="pageSize" show-total class="paging" @on-change="changepage"></Page>
    </div>
</template>
<script>
import {globalhttp} from '../Global/global';
import axios from 'axios'
export default {
    name: 'common-table',
    data () {
        return {
            ajaxHistoryData:[],
                // 初始化信息总条数
            dataCount:0,
                // 每页显示多少条
            pageSize:10,
            historyColumns: [
                    {
                        title: 'id',
                        key: 'id'
                    },
                    {
                        title: '姓名',
                        key: 'realName'
                    },
                    {
                        title: '手机号',
                        key: 'phone'
                    },
                    {
                        title: '内容',
                        key: 'content'
                    }

                ],
                historyData: []
            }
        },
        methods:{
            // 获取历史记录信息
            getdata(params){
                let this1 = this;
                axios.get(globalhttp.pc_getTopicMomentsInfo,{
                            params: params,
                        })
                        .then(resp => {
                            //alert(JSON.stringify(resp));
                            //console.log(JSON.stringify(resp));
                            //alert(JSON.stringify(resp.data.status));
                            if(resp.data.status === 1)
                            {
                                //debugger
                                this1.ajaxHistoryData = resp.data.list;                             
                                this1.dataCount = resp.data.all_count;
                                this.historyData = this1.ajaxHistoryData;
                            }
                        }).catch(err => {             //
                            
                    });
            },
            handleListApproveHistory(){
               this.getdata({'title': '','page': 0,'limit': 10});
            },
            changepage(index){
                this.getdata({'title': '','page': index,'limit': 10});
            }
        },
        created(){
             this.handleListApproveHistory();
        }
    }
</script>

(2) 配置路由

  path: '/tables',
        icon: 'ios-grid-view',
        name: 'tables',
        title: '表格',
        component: Main,
        children: [
            { path: 'dragableTable', title: '可拖拽排序', name: 'dragable-table', icon: 'arrow-move', component: resolve => { require(['@/views/tables/dragable-table.vue'], resolve); } },
            { path: 'editableTable', title: '可编辑表格', name: 'editable-table', icon: 'edit', component: resolve => { require(['@/views/tables/editable-table.vue'], resolve); } },
            { path: 'searchableTable', title: '可搜索表格', name: 'searchable-table', icon: 'search', component: resolve => { require(['@/views/tables/searchable-table.vue'], resolve); } },
            { path: 'exportableTable', title: '表格导出数据', name: 'exportable-table', icon: 'code-download', component: resolve => { require(['@/views/tables/exportable-table.vue'], resolve); } },
            { path: 'table2image', title: '表格转图片', name: 'table-to-image', icon: 'images', component: resolve => { require(['@/views/tables/table-to-image.vue'], resolve); } },
            { path: 'commontable', title: '表格转图片', name: 'common-table', icon: 'images', component: resolve => { require(['@/views/tables/common-table.vue'], resolve); } }
        ]

(3) 查看效果