element-UI动态的循环生成Popover弹出框的方法

最新推荐文章于 2024-03-11 10:59:03 发布

转载最新推荐文章于 2024-03-11 10:59:03 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhaoxiaobei/p/9283875.html

文章标签：

#javascript #ui #ViewUI

本文介绍了一个使用Vue.js实现的父组件与子组件交互的示例，通过v-for循环展示列表，并利用v-model进行弹窗状态绑定。子组件采用el-popover实现弹出效果，展示了如何在子组件中响应父组件传递的数据。

父组件：
<div class="itemLi" :class="{gray: (salse.flashsaleStatus==3 || salse.flashsaleStock<1), red:salse.flashsaleStatus==2, yellow:salse.flashsaleStatus==1}"
v-for="(salse, rindex) in item.fList " :key="rindex">
　　<span class="dian"></span>
　　<PlanDialog :data="salse" :option="'view'" @saveSuccess="saveSuccess"></PlanDialog>
</div>

子组件：
<template>
<el-popover trigger="click" placement="right" @show="init" @hide="clear_param" v-model="planShow">
　　<div class="tc_content">
　　　　这是一段内容。。。。
　　</div>
　　<el-tag slot="reference" class="name-wrapper">{{data.ruleName?data.ruleName:'添加新的项'}}</el-tag>
</el-popover>
</template>

转载于:https://www.cnblogs.com/zhaoxiaobei/p/9283875.html