元件封裝

按照自己的專案需求進行調整

<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>