下面是element ui的分页组件用法：

   <el-table
              v-bind:data="tablelist.slice((currentPage-1)*pageSize,currentPage*pageSize)"                          
              border
              ref="multipleTable"                  
              style="width: 100%">
             <el-table-column
                     prop="id"
                     label="ID"
                     width="180">
                   
                     </el-table-column>
     </el-table>
 <el-pagination style="margin-top: 10px;"
                        background 
                        :page-size="pageSize"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        @size-change="handleSizeChange"
                        :page-sizes="[5,10,20,30,50,70,100]"
                         layout="prev, pager, next,total,jumper,sizes"
                        :total="tablelist.length" >
                       </el-pagination>

// vue实例
export default({
 components: {},
  props: [],
  data: function () {
      return {
       pageSize: 10,
       currentPage:1,
       tablelist:[]
      }
  },
    methods: {
        handleSizeChange(size) {
            this.pageSize = size;
            this.currentPage = 1;
        },
        handleCurrentChange(currentPage) {          
          this.currentPage = currentPage;
        },
   },
})

通过上面的配置，即可显示一个分页组件在html中。

本文内容全部结束，感谢您的阅读，希望对您有所帮助。