elementUi的el-badge使用【子傳父統計】


實際開發中,需要統計table表內數據並使用badge小紅點提示數量

廢話不多說,上圖上代碼

大概就如圖所示,只有一條數據,上面的

el-badge就只顯示1
示例放完了,開始放代碼片段
第一步:先從子組件內獲取我們所需要的數據信息
通過vue子傳父的屬性$emit將獲取到的值傳到父組件中,注意數據對應數量在接口傳過來的類型是string類型,所以我們要用parseInt轉換為整型再使用
 
 
第二步:父組件獲取子組件傳遞過來的數據

 通過事件監聽獲取由子組件$emit傳過來的兩個值,並對其類型判斷后展現

在判斷類型與當前tabs選擇的類型相同后,把對應的數量賦值給當前選擇的list下的total

其中,list的數據結構如下

歡迎留下您的評論,前端技術交流群:Q群——778140903

 


免責聲明!

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



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