Vue2 使用 Element-UI 实现动态控制弹框按钮 - 审核按钮与详情按钮切换
可以通过动态控制弹框内的内容来实现这个功能,具体步骤如下:
- 在弹框组件中,使用条件语句控制审核按钮的显示与隐藏,如:
<el-button v-if='showAuditButton' @click='handleAudit'>审核</el-button>
- 在页面中引用弹框组件时,传入控制审核按钮显示与隐藏的参数,如:
<custom-dialog :show-audit-button='true'></custom-dialog>
-
对于需要显示审核按钮的地方,传入参数值为true,对于不需要显示审核按钮的地方,传入参数值为false。
-
在组件中接收传入的参数,并根据参数值来控制审核按钮的显示与隐藏,如:
props: {
showAuditButton: {
type: Boolean,
default: false
}
},
data() {
return {
showAuditButton: this.showAuditButton
}
}
这样就可以根据传入的参数来动态控制弹框内的内容,实现审核按钮的显示与隐藏。如果需要在页面中显示弹框,可以直接在页面中引用弹框组件,并传入相应的参数。如果需要在表格中弹出弹框,可以在表格中添加一个按钮,点击按钮时弹出弹框,并传入相应的参数。
原文地址: https://www.cveoy.top/t/topic/nVSb 著作权归作者所有。请勿转载和采集!