<table class="table table-hover table-bordered">
 <thead>
  <tr>
  <th width="10%">id</th>
  <th width="30%">name</th>
  <th width="40%">content</th>
  <th width="20%">remark</th>
  </tr>
 </thead>
 <tbody>
  <tr v-for="data in tableList">
  <td v-text="data.num"></td>
  <td v-text="data.author"></td>
  <td v-text="data.contents"></td>
  <td v-text="data.remark"></td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
  <td colspan="4">
   <div class="pull-left">
   <button class="btn btn-default" v-on:click="refresh">刷新</button>
   </div>
   <div class="pull-right">
   <boot-page :async="false" :data="lists" :lens="lenArr" :page-len="pageLen" :param="param"></boot-page>
   </div>
  </td>
  </tr>
 </tfoot>
</table>

<script>
 import bootPage from './components/BootPage.vue'

 export default {
  data () {
  return {
   lenArr: [10, 50, 100], // 每頁顯示長度設(shè)置
   pageLen: 5, // 可顯示的分頁數(shù)
   lists: [
   {num: 1, author: 'luozh', contents: 'BootPage是一款支持靜態(tài)數(shù)據(jù)和服務(wù)器數(shù)據(jù)的表格分頁組件', remark: 'dsds'},
   {num: 2, author: 'luozh', contents: '支持調(diào)整每頁顯示行數(shù)和頁碼顯示個(gè)數(shù)，樣式基于bootstrap', remark: 'dsds'},
   {num: 3, author: 'luozh', contents: '<boot-page>標(biāo)簽中async指是否從服務(wù)器端獲取數(shù)據(jù)，false為否', remark: 'dsds'},
   {num: 4, author: 'luozh', contents: 'data為靜態(tài)的表格數(shù)據(jù)數(shù)組；', remark: 'dsds'},
   {num: 5, author: 'luozh', contents: 'lens為每頁顯示行數(shù)的數(shù)組', remark: 'dsds'},
   {num: 6, author: 'luozh', contents: 'page-len為可顯示的頁碼數(shù)', remark: 'dsds'},
   {num: 7, author: 'luozh', contents: '服務(wù)器回傳參數(shù)為{data:[], page_num: 6}, 其中data為表格數(shù)據(jù)，page_num為總頁數(shù)', remark: 'dsds'},
   {num: 8, author: 'luozh', contents: '可以調(diào)用this.$refs.page.refresh()刷新表格數(shù)據(jù)', remark: 'dsds'}
   ], // 表格原始數(shù)據(jù)，使用服務(wù)器數(shù)據(jù)時(shí)無需使用
   tableList: [] // 分頁組件傳回的分頁后數(shù)據(jù)
  }
  },
  components: {
  bootPage
  },
  events: {

  // 分頁組件傳回的表格數(shù)據(jù)
  'data' (data) {
   this.tableList = data
  }
  }
 }
</script>

<script>
 import bootPage from './components/BootPage.vue'

 export default {
  data () {
  return {
   lenArr: [10, 50, 100], // 每頁顯示長度設(shè)置
   pageLen: 5, // 可顯示的分頁數(shù)
   url: '/bootpage/', // 請求路徑
   param: {}, // 向服務(wù)器傳遞參數(shù)
   tableList: [] // 分頁組件傳回的分頁后數(shù)據(jù)
  }
  },
  methods: {
  refresh () {
   this.$refs.page.refresh() // 這里提供了一個(gè)表格刷新功能
  }
  },
  components: {
  bootPage
  },
  events: {

  // 分頁組件傳回的表格數(shù)據(jù)（這里即為服務(wù)器傳回的數(shù)據(jù)）
  'data' (data) {
   this.tableList = data
  },

  // 刷新數(shù)據(jù)
  'refresh' () {
   this.refresh()
  }
  }
 }
</script>