element-ui 分頁 page-size 不起作用

我想通過element-ui 來分頁，設(shè)置每頁顯示的條數(shù)，但還是會把所有數(shù)據(jù)顯示出來。

<el-pagination @size-change="handleSizeChange" @currentchange="handleCurrentChange" :current-page.sync="currentPage1" 
:page-sizes="[10,20,30, 50]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>

我的數(shù)據(jù)是自己生成的，一次生成30條，我想讓不要一頁顯示出來，但是效果是每次都把30條給顯示出來了

mockTableData1 () {
      let data = []
      for (let i = 0; i < 30; i++) {
        data.push({
          id: this.inde++,
          stid: Math.floor(Math.random() * 10000 + 1),
          name: 'ABC' + Math.floor(Math.random() * 100 + 1),
          sex: '男',
          time: Math.random() * 1000 + 1,
          cm: Math.random() * 1000 + 100,
          kg: Math.random() * 100 + 10,
          totaltuition: 24000,
          submitted: 1000,
          submittes: 2300,
          isover: 'N'
        })
      }

這是什么原因？