ElementUI 前端分页的实现

请求得到的数据

官方文档给的有，最主要的是el-table里面展示的数据怎么处理

通过 :data来绑定数据实现分页 userList就是获取到的数据

User.vue

<!--表格区域-->
    <el-table style="width: 100%" :data="userList.slice((currentPage-1)*pageSize,currentPage*pageSize)" border>
      <el-table-column  label="#"  width="60" prop="id">
      </el-table-column>
      <el-table-column label="姓名" prop="name">
      </el-table-column>
      <el-table-column label="邮箱" prop="email">
      </el-table-column>
      <el-table-column label="电话" prop="tel">
      </el-table-column>
      <el-table-column label="状态"  prop="mg_state">
        <template slot-scope="scope">
        <el-switch v-model="scope.row.mg_state" @change="userChangeStatused(scope.row)">
        </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!--编辑按钮-->
            <el-button type="primary" icon="el-icon-edit" :modal="scope" size="small" circle></el-button>
          <!--删除按钮-->
            <el-button type="danger" icon="el-icon-delete" size="small" circle></el-button>
          <!--分配角色按钮-->
          <el-tooltip class="item" effect="dark" :content="'为'+ scope.row.name + '分配角色'"  :enterable="false" placement="top">
            <el-button type="warning" icon="el-icon-setting" size="small" circle></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 2, 5, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="parseInt(total)">
    </el-pagination>
  </el-card>
<script>
export default {
  created() {
    this.getUserList()
  },
  data() {
    return {
      userList: [],
      // 分页用到的数据
      currentPage: 1,
      pageSize: 1,
      total: 0
    }
  },
  methods: {
      //发送请求拿到数据
    async getUserList() {
      const { data: res } = await this.$axios.get('/users')
      this.userList = res.data
      this.total = this.userList.length
      console.log(this.userList)
    },
    handleSizeChange(newSize) {
      // pagesize改变触发
      this.pageSize = newSize
    },
    handleCurrentChange(newPage) {
      // 页码改变触发
      this.currentPage = newPage
    }
  }
}
</script>

<style lang="less" scoped>

</style>

渲染完成后的效果