vue实现消息badge 标记_基于elmentui实现button点击/切换出现【Badge 】标记 效果 随手一记！...

实现效果：

HTML：

v-for="(item,index) in order_nav_list"

:key="item.index"

:name="item.status"

:count="item.count">

{{item.name}}

把el-tabs和el-badge结合 通过具名 slot 来实现自定义标签页的内容methods：

handleClick (tab) {

const status = tab.paneName;

console.log(tab);

console.log(status);

this.orderStatus = status;

console.log("orderStatus---:" + this.orderStatus);

this.getDataList();

},

addnum(status){

const list=this.order_nav_list;

var totalnum =this.totalPage;

console.log("==进入改变按钮数字=="+status)

console.log("==进入改变按钮状态=="+totalnum)

totalnum>99?totalnum='+99':totalnum;

list.forEach(item => {

//console.log(item);

if(status==item.status){

item.count=totalnum

}else {

item.count=0

}

});

},