msslgomez
2 months ago
417
4
Vue

Element-ui pagination with table

Posted 2 months ago by msslgomez

I'm wondering how I can use the pagination along with the table, and also not on the table.

This is what I have so far

<el-table
    :data="displayData"
    style="width: 100%">
    <el-table-column
        prop="name"
        label="Nombre">
    </el-table-column>
</el-table>

<div>
    <el-pagination
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :hide-on-single-page="true"
        :page-size="5"
        :total="categories.length">
    </el-pagination>
</div>

//computed
displayData() {
    if (!this.categories || this.categories.length === 0) return [];

}

//method //default from example
handleCurrentChange(val) {
    console.log(`current page: ${val}`);      
},

I'm reading the docs but I'm still confused, the pagination in Element-ui isn't explained all that well, for example the events https://element.eleme.io/#/en-US/component/pagination#events

How would I use those to be able to connect the table and the pagination together?

Please sign in or create an account to participate in this conversation.