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