Ant table報錯 Warning: [antdv: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key.]


方法1
<a-table
  :columns="columns"
  :data-source="data"
  size="small"
  :rowKey="(row) => row.key"
> // key為 data 中的一個屬性
</a-table>



方法2
<a-table
  :columns="columns"
  :data-source="data"
  size="small"
  :rowKey="
    (row, index) => {
      return index;
    }
  "
> //row 為每一條數據, index 索引
</a-table>



方法3
<a-table
  :columns="columns"
  :data-source="data"
  size="small"
  rowKey="key"
>  // key為 data 中的一個屬性 !!! 這里的rowKey不需要冒號
</a-table>



方法4(如果后台返回數據沒有給你傳key/id,那么我們自己去定義)
<a-table
  :columns="columns"
  :data-source="data"
  size="small"
  rowKey="key"
>  // key為 data 中的一個屬性 !!! 這里的rowKey不需要冒號
</a-table>

// 當后台返回數據時 (模擬請求API)
getData(){
    // queryModelTableData  是請求的Api方法 不要太在意  代碼重點是下面.then里面的東西
    queryModelTableData({curren:1, size:10}).then(res=>{
        this.data = res.list(如果后台返回數據沒有給你傳key/id,還要我們自己去加的話,這個方法很實用)
        for (let i in this.data) {
          this.data[i].key = parseInt(i) + 1; //主要就是parseInt 這個方法
       }
    })
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM