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

Question

我想通过element-ui 来分页，设置每页显示的条数，但还是会把所有数据显示出来。

<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>

我的数据是自己生成的，一次生成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'
        })
      }

这是什么原因？

Answer 1

<el-table> 和 el-pagination 两个组件没有任何关联。
想要一页显示多少条，需要通过el-pagination中的 size-change和 current-change事件 手动控制 data属性值。

Answer 2

分页组件并不会去控制表格组件哈，也就是说那个page-size参数只是用来控制分页组件的显示效果的，如图可见其实已经起作用了。
表格组件一页显示多少条信息，取决于你给它的data属性传递的数组有多少条信息。
按照你的需要，应该用数组A存储这30条信息，数组B按照当前页数从数组A中取出十条数据，并将数组B传递给table组件的data属性。