网站系统建设费用,安徽合肥紧急通报,html5手机网站开发视频教程,工作表同时显示多个tooltip——效果图#xff1a; 点击第一个二维码把循环el-card中所有的tooltip都触发了
解决后效果图#xff1a; 只显示点击的当前tooltip
解决办法#xff1a; 通过循环item中定义字段#xff0c;进行控制tooltip显示隐藏 代码#xff1a;
页面代码 点击第一个二维码把循环el-card中所有的tooltip都触发了
解决后效果图 只显示点击的当前tooltip
解决办法 通过循环item中定义字段进行控制tooltip显示隐藏 代码
页面代码el-card :body-style{ padding: 0px } v-foritem in Listdiv styledisplay: inline-block;margin-right: 10px;el-tooltip v-modelitem.qRCodeShow :manualtrue placementbottom effectlightel-buttonclassbtnTextStyleclickqRCodeClick(item.id)typetextsizesmall二维码/el-buttondiv slotcontentp style margin: 0;font-size:16px;防火门/pp styletext-align: right;color:blue;cursor: pointer; margin: 5px 0;font-size:14px; click.stop下载/pimg src../../assets/images/loginBg.png stylewidth: 200px;height: 150px;//div/el-tooltip/div/el-carddata数据
data(){return{List:[{id:1,qRCodeShow:false,},{id:2,qRCodeShow:false,},{id:3,qRCodeShow:false,},{id:4,qRCodeShow:false,},],}
},方法
qRCodeClick(id){this.List.map((item,index) {if(item.id id){this.List[index].qRCodeShow !this.List[index].qRCodeShow;}})this.$forceUpdate()},
