title: How to link table and pagination of Element UI?
body: <p>I work on Vue.js and use the Element UI library. </p>
  
  <p>I have an el-table containing a lot of data, and an el-pagination just below, but I don't manage to connect them. </p>
  
  <p>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.</p>
  
  <p>The data attributes in the table and in the pagination are set to the same variable ("tableData") but that doesn't work.</p>
  
  <p>How can I connect these two elements ?</p>
  
  <p>Here is my .vue code: </p>
  
  <pre><code>                      &lt;el-table :data="tableData" stripe class="margin-top-5" style="width: 100%"&gt;
                          &lt;el-table-column 
                              align="center"
                              label="Favori" 
                              sortable
                              min-width="75"&gt;
                                  &lt;template slot-scope="scope"&gt;
                                      &lt;i class="el-icon-star-off"&gt;&lt;/i&gt;
                                  &lt;/template&gt;
                          &lt;/el-table-column&gt;
                          &lt;el-table-column 
                              align="center"
                              prop="legal_name" 
                              :label="$gettext('Raison sociale')" 
                              sortable 
                              min-width="120"&gt;
                          &lt;/el-table-column&gt;
                          &lt;el-table-column 
                              align="center"
                              prop="address" 
                              :label="$gettext('Adresse')" 
                              sortable 
                              min-width="180"&gt;
                          &lt;/el-table-column&gt;
                          &lt;el-table-column 
                              align="center"
                              prop="city" 
                              :label="$gettext('Ville')" 
                              sortable 
                              min-width="100"&gt;
                          &lt;/el-table-column&gt;
                          &lt;el-table-column 
                              align="center"
                              prop="zip_code" 
                              sortable 
                              :label="$gettext('Code postal')"
                              min-width="110"&gt;
                          &lt;/el-table-column&gt;
                          &lt;el-table-column 
                              align="center"
                              prop="country" 
                              :label="$gettext('Pays')" 
                              sortable&gt;
                          &lt;/el-table-column&gt;
                      &lt;/el-table&gt;
                  &lt;/el-card&gt;
              &lt;/el-col&gt;
          &lt;/el-row&gt;
  
          &lt;el-row type="flex" justify="end" class="margin-top-5 margin-bottom-5 row-pagination"&gt;
              &lt;el-button v-translate size="small" class="show-all"&gt;Afficher tout&lt;/el-button&gt;
              &lt;el-pagination
                  background
                  layout="-&gt;, prev, pager, next"
                  :total="1000"
                  :data="tableData"&gt;
              &lt;/el-pagination&gt;
          &lt;/el-row&gt;
  </code></pre>
  
  <p>In my .js associated file I have:</p>
  
  <pre><code>data() {
  return {
    tableData: [],
  };
  </code></pre>
  
  <p>and :</p>
  
  <pre><code>created() {
  api.getAddresses().then(addresses =&gt; {
    this.tableData = addresses;
  });
  }
  </code></pre>
  
  <p>Thank you in advance for your help!</p>