Element-ui（el-table、el-pagination）实现表格分页

（注意：这里模仿的是后端一次性给好数据，前端进行分页）

1 表格中最主要的是分页页码和每一页的条数，和要展示的数据列表

详细配置可以去 element ui 官网 Element - The world's most popular Vue UI framework  

Table和Pagination

    <<!-- 表格 -->> 
    <el-table
      ref="multipleTable"
      :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      tooltip-effect="dark"
      style="width: 100%"
     >
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        width="120">
      </el-table-column>
      <el-table-column
        prop="sex"
        label="性别"
        width="120">
      </el-table-column>
    </el-table>

    <<!-- 分页器  -->>
    <div style="text-align: center;margin-top: 30px;">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="current_change">
      </el-pagination>
    </div>

2  js中主要配置好对应的页码和数据总条数

    export default {
    
    data() {
      return {
        //  需要模拟自己想要的数据  应复制多条
        tableData: [
            {
                name:'王小虎',
                age:18,
                sex:'男'
            }，
        ],
        total:0 ,
        //默认一页十条
        pagesize:10,
        currentPage:1
      }
    },
    mounted() {
       this.total=this.tableData.length;
    },
    methods: {
      
      // 这里拿到页码 并赋值
      current_change:function(currentPage){
        this.currentPage = currentPage;
      },
　　　
    }