Vue——ElementUI表格分页

组件封装

这种控件基本需要按照各自的项目需求进行设计，这里设计了基础版本，各个属性值已经在注释中注明，实际使用仍需调整

<!--分页组件-->
<template>
  <el-container height="100%">
    <el-table :data="list">
      <slot></slot>
    </el-table>
    <el-footer v-if="isPage">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.page"
        :page-sizes="[10, 30, 50, 100]"
        :page-size="pageInfo.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-footer>
  </el-container>
</template>

<script>
    export default {
        name: "page-table"
        , props: {
            //数据Url
            url: {type: String}
            //是否需要分页，给个标志位，可以禁用掉分页功能
            , isPage: {
                type: Boolean,
                default: true
            }
            //当前页码
            , page: {
                type: Number,
                default: 1
            }
            //每一页容量
            , limit: {
                type: Number,
                default: 10
            }
            //查询结果格式化
            , resultParser: {
                type: Function
            }
        }
        , created: function () {
            //模拟数据
            this.list = [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }];
            //TODO: 数据查询（按照项目需求，设置数据查询函数）
        }, methods: {
            handleSizeChange(val) {
                this.pageInfo.limit = val;
                console.log(this.pageInfo);
                //TODO: 数据查询（按照项目需求，设置数据查询函数）
                //数据查询结束之后，total和list都会发生变化
            }
            ,
            handleCurrentChange(val) {
                this.pageInfo.page = val;
                console.log(this.pageInfo);
                //TODO: 数据查询（按照项目需求，设置数据查询函数）
                //数据查询结束之后，total和list都会发生变化
            }
        }
        , data() {
            return {
                //分页信息
                pageInfo: {
                    page: this.page,
                    limit: this.limit,
                }
                //数据总条数，需要注意每一次查询都可能发生变化
                , total: 100
                //数据列表
                , list: []
            }
        }
    }
</script>

调用Demo

<template>
  <div>
    <page-table :url="pageInfo.url">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </page-table>
  </div>
</template>

<script>
    import PageTable from '@/components/widget/PageTable.vue'

    export default {
        components: {
            PageTable
        },
        data() {
            return {
                pageInfo: {
                    url: 'http://www.baidu.com'
                    , page: 1
                    , limit: 10
                }
            }
        }
    }
</script>