element ui使用分頁插件導致第二頁數據出問題解決辦法

出問題時候的代碼

<div class="card-display">
  <el-row>
    <el-col :span="6"
            v-for="(item, index) in result"
            :key="index"
            :offset="index > 0 ? 0 : 0">
      <cards :ids="randomName()"
             :equityBalance="item.equityData"
             :account="item.account"
             :item="item"
             class="card-sig"></cards>
    </el-col>
  </el-row>
</div> 
<div class="block">
  <el-pagination @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
                 :page-sizes="[8, 16, 24, 32]"
                 :page-size="8"
                 layout="total, sizes, prev, pager, next, jumper"
                 :total="total">
  </el-pagination>
</div>

問題描述:

第一頁時候的數據正常,第二頁只有兩條數據的時候,盡管會有動作請求數據庫返回正確的第二頁的兩條數據,但是頁面不會刷新,使用的還是第一頁的前兩條信息

問題排查

問題出在el-col標簽中的key值上面,因為key值使用的是index,第一頁的key值分別為0-7或者(1-8),加載第二頁的時候,key值還是(0-7)或者(1-8),此時第二頁和第一頁的key值是重復的,vue認為還是一樣的node,此時就不會重新渲染,使用的還是第一頁的前兩條數據.

解決辦法

將每個key值設置為獨一無二的值,這樣當有新數據的時候,就會重新渲染,保證數值正確

<div class="card-display">
  <el-row>
    <el-col :span="6"
            v-for="(item, index) in result"
            :key="item.account"
            :offset="index > 0 ? 0 : 0">
      <cards :ids="randomName()"
             :equityBalance="item.equityData"
             :account="item.account"
             :item="item"
             class="card-sig"></cards>
    </el-col>
  </el-row>
</div> 
<div class="block">
  <el-pagination @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
                 :page-sizes="[8, 16, 24, 32]"
                 :page-size="8"
                 layout="total, sizes, prev, pager, next, jumper"
                 :total="total">
  </el-pagination>
</div>

此時key中的item.account是獨一無二的值,保證不會出問題了

vue官方key解釋

• 預期：number | string

key 的特殊屬性主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對比時辨識 VNodes。如果不使用 key，Vue 會使用一種最大限度減少動態元素並且盡可能的嘗試修復/再利用相同類型元素的算法。使用 key，它會基於 key 的變化重新排列元素順序，並且會移除 key 不存在的元素。

有相同父元素的子元素必須有獨特的 key。重復的 key 會造成渲染錯誤。

最常見的用例是結合 v-for：

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

它也可以用於強制替換元素/組件而不是重復使用它。

當你遇到如下場景時它可能會很有用：

完整地觸發組件的生命周期鈎子
觸發過渡
例如：

<transition>
  <span :key="text">{{ text }}</span>
</transition>

當 text 發生改變時， 會隨時被更新，因此會觸發過渡。