ElementUi分页组件碰到的问题

在使用elementui分页组件时，碰到用了组件后，分页的功能都正常实现，但是页面渲染的数据并不是按照所要求的每页显示5条或者10条来显示。

分析原因：

el-table获取的数据应当是已经做好处理的数据，而不是从后端拿到的整体数据

以下为代码

<template>
  <div id="app">
    <el-table :data="tableData" style="width: 100%" border ref="multipleTable" @select="selectRow">

      <el-table-column  type="selection" width="55"></el-table-column>

      <el-table-column prop="userId" label="用户编号" width="180"></el-table-column>

      <el-table-column prop="userName" label="用户名" width="180"></el-table-column>

      <el-table-column prop="userMale" label="性别" width="180"></el-table-column>

        <el-table-column prop="headImage" label="头像" >
          <template slot-scope="scope">
            <el-image
                :src='scope.row.headImage'
                style="width: 80px; height: 50px"
            ></el-image>
          </template>
        </el-table-column>


      <el-table-column prop="userBirthday" label="用户生日"></el-table-column>

      <el-table-column prop="userAddress" label="用户地址"></el-table-column>

    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="toggleSelection()">取消选择</el-button>
     </div>
    <div class="block">
      <span class="demonstration">调整每页显示条数</span>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[5,10,15,20,25,30]"
          :page-size="pageSize"
          layout="total,sizes,prev, pager, next,jumper"
          :total="userMessage.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "userInfo",
  data(){
    return {
      currentPage:1,
      pageSize:10,
      tableData:''
    }
  },
  methods:{
    //每页的条数
    handleSizeChange(val){
      this.pageSize = val
      this.getPageDate()
      console.log('每页的数据',this.getPageDate())
      console.log(`每页${val}条`)
      console.log('每页显示的记录数',this.pageSize)
    },
    handleCurrentChange(val){
      this.currentPage = val
      this.getPageDate()
      console.log(`当前页${val}`)
      console.log('每页的页码显示',this.currentPage)
    },
    getPageDate(){
      //计算分页数据的起始位置
      // eslint-disable-next-line no-unused-vars
      let start = (this.currentPage - 1)*this.pageSize
      //计算分页数据的结束位置
      let end = start + this.pageSize
      //获取分页数据  this.userMessage.slice(start,end) 每页需要渲染的条数
      this.tableData = this.userMessage.slice(start,end)
      // console.log('分页数据',this.tableData)
    },
    //
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    selectRow(selection,row){
      console.log('row',selection,row)
      let u_id = ''
      for(let user of selection){
        u_id += user.userId+','
      }
      u_id = u_id.substring(0,u_id.length-1)
      console.log(u_id)
    },
    getuserInfo(){
      this.$http.get('/api/find').then(res=>{
        console.log(res)
        this.tableData = res.data
      }).catch(e=>{
        console.log(e)
      })
    }
  },
  computed:{
    userMessage(){
      return this.$store.getters.getUserList
    }
  },
  created() {
      this.$store.dispatch('getUserList')
    this.getuserInfo()
  }
}
</script>

<style scoped>

</style>