elemnt-vue-admin实现分页

两种方法

1. 每次点击不同的页调一次后端，查询数据限制
2. 加载所有数据，分页展示

第二种的实现

1. javascript

   // 导入组件
   import Pagination from '@/components/Pagination' 
   
   export default {
     // 引用组件
     components: { Pagination },
     data() {
         // list存放每页要显示的数据
         list: [],
         total: 0,
         listQuery: {
           page: 1,
           limit: 10
         }
     }
   }
   
   // 计算当前页要展示的数据
   computed: {
       getList() {
         const lists = this.GroupsList.slice((this.listQuery.page - 1) * this.listQuery.limit, (this.listQuery.page - 1) * this.listQuery.limit + this.listQuery.limit)
         return lists
       }
   },
   
   created() {
       this.getGroups()
   },
   
   methods: {
       async getGroups() {
         const res = await getGroups()
         this.GroupsList = res.data
         this.total = this.GroupsList.length
         // 第一页数据初始化   
         this.list = this.getList
      },
      // 点击不同页时调用的方法
      handlePageList() {
         this.list = this.getList
      },
   

2. template

   <!-- 展示当前页数据list -->
   <el-table :data="list" style="width: 100%;margin-top:30px;" border>
      <el-table-column align="center" label="用户组" width="220">
           <template slot-scope="scope">
             {{ scope.row.usergroup }}
           </template>
      </el-table-column>    
   </el-table>
   
   <!-- 点击不同页调用handlePageList方法 -->
   <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="handlePageList" />