VUE（七）——ElementUI表格分页

组件封装

按照自己的项目需求进行调整

<template>
  <div>
    <el-container>
      <el-table :data="data">
        <slot></slot>
      </el-table>
      <el-footer>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 30, 50, 100]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: "page-table"
    , props: {
      data: {
        //list页面数据(如果是针对项目做的组件，考虑直接传递后台数据，因为后台数据通常会包含分页信息)
        type: Array,
        default: []
      }, page: {
        //当前页码
        type: Number,
        default: 1
      }, limit: {
        //每一页容量
        type: Number,
        default: 10
      }, total: {
        //列表查询，有时候用户会新增、删除一条数据，总条数是会变化的
        type: Number,
        default: 100
      }, onRefresh: {
        //分页发生变化回调
        type: Function,
        default: function () {
        }
      }
    }, methods: {
      handleSizeChange(val) {
        this._limit = 1;
        this.$emit('onRefresh', {page: this._page, limit: this._limit});
      },
      handleCurrentChange(val) {
        this._page = val;
        this.$emit('onRefresh', {page: this._page, limit: this._limit});
      }
    }, mounted() {
      this._limit = this.limit;
      this._page = this.page;
    }, data() {
      // el-pagination 似乎无法双向绑定数据，页面的变化，并不会改变具体数值，这里加两个参数记住分页参数
      return {
        _page: 1
        , _limit: 10
      }
    }
  }
</script>

调用Demo

<template>
  <div>
    <page-table :data="tableList.list" @onRefresh="onPageRefresh">
      <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/PageTable.vue'

  export default {
    components: {
      PageTable
    },
    data() {
      return {
        tableList: {
          limit: 10,
          page: 4,
          total: 100,
          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 弄'
          }]
        }
      }
    },
    methods: {
      onPageRefresh(params) {
        //TODO: 查询新的数据，赋值给tableList
        console.log(params);
      }
    }
  }
</script>