vue2用el-dialog怎么实现同一个弹框点击审核的时候弹框里有多出来一块内容点击查看详情的时候没有弹框就在页面中
可以通过在 el-dialog 组件中添加一个条件渲染来实现不同状态下的不同内容展示。具体实现步骤如下:
-
在 el-dialog 组件中添加一个属性 v-if 或 v-show,根据不同状态控制其显示或隐藏。
-
在点击“审核”按钮时,改变弹框的状态,使其显示审核内容。
-
在点击“查看详情”按钮时,改变弹框的状态,使其不显示审核内容。
示例代码:
<el-dialog :visible.sync="dialogVisible">
<div v-if="showAuditContent">
<!-- 审核内容 -->
</div>
<div v-else>
<!-- 详情内容 -->
</div>
</el-dialog>
<el-button @click="showAuditContent = true">审核</el-button>
<el-button @click="showAuditContent = false">查看详情</el-button>
data() {
return {
dialogVisible: false, // 弹框显示状态
showAuditContent: false // 是否展示审核内容
}
}
``
原文地址: https://www.cveoy.top/t/topic/eEPQ 著作权归作者所有。请勿转载和采集!