How to link table and pagination of Element UI?

Question

I work on Vue.js and use the Element UI library.

I have an el-table containing a lot of data, and an el-pagination just below, but I don't manage to connect them.

For now, when I click on a different page of the pagination, the selected number of the pagination element changes but it doesn't update the data inside the table.

The data attributes in the table and in the pagination are set to the same variable ("tableData") but that doesn't work.

How can I connect these two elements ?

Here is my .vue code:

                      <el-table :data="tableData" stripe class="margin-top-5" style="width: 100%">
                        <el-table-column 
                            align="center"
                            label="Favori" 
                            sortable
                            min-width="75">
                                <template slot-scope="scope">
                                    <i class="el-icon-star-off"></i>
                                </template>
                        </el-table-column>
                        <el-table-column 
                            align="center"
                            prop="legal_name" 
                            :label="$gettext('Raison sociale')" 
                            sortable 
                            min-width="120">
                        </el-table-column>
                        <el-table-column 
                            align="center"
                            prop="address" 
                            :label="$gettext('Adresse')" 
                            sortable 
                            min-width="180">
                        </el-table-column>
                        <el-table-column 
                            align="center"
                            prop="city" 
                            :label="$gettext('Ville')" 
                            sortable 
                            min-width="100">
                        </el-table-column>
                        <el-table-column 
                            align="center"
                            prop="zip_code" 
                            sortable 
                            :label="$gettext('Code postal')"
                            min-width="110">
                        </el-table-column>
                        <el-table-column 
                            align="center"
                            prop="country" 
                            :label="$gettext('Pays')" 
                            sortable>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>

        <el-row type="flex" justify="end" class="margin-top-5 margin-bottom-5 row-pagination">
            <el-button v-translate size="small" class="show-all">Afficher tout</el-button>
            <el-pagination
                background
                layout="->, prev, pager, next"
                :total="1000"
                :data="tableData">
            </el-pagination>
        </el-row>

In my .js associated file I have:

data() {
return {
  tableData: [],
};

and :

created() {
api.getAddresses().then(addresses => {
  this.tableData = addresses;
});
}

Thank you in advance for your help!

Answer 1

@Pearly Spencer, You should have a local computed array which will hold the displayed data, something like:

In the html: change tableData to displayData:

:data="displayData"

In the script:

computed: {  

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

    <!---   Your filter logic goes here --->

  },

}

In other words, you should implement the displayData manually upon each change / click via handleCurrentChange

methods: {
        handleCurrentChange(val) {

        }
    }

Good Luck!