elementUi的el-badge使用【子传父统计】

实际开发中，需要统计table表内数据并使用badge小红点提示数量

废话不多说，上图上代码

大概就如图所示，只有一条数据，上面的

el-badge就只显示1

示例放完了，开始放代码片段

第一步：先从子组件内获取我们所需要的数据信息

通过vue子传父的属性$emit将获取到的值传到父组件中，注意数据对应数量在接口传过来的类型是string类型，所以我们要用parseInt转换为整型再使用

 

 

第二步：父组件获取子组件传递过来的数据

 通过事件监听获取由子组件$emit传过来的两个值，并对其类型判断后展现

在判断类型与当前tabs选择的类型相同后，把对应的数量赋值给当前选择的list下的total

其中，list的数据结构如下

欢迎留下您的评论，前端技术交流群：Q群——778140903