el-button type=success plain click=openDialogi-ep-plus 添加el-button这个按钮鼠标点击按钮显示下拉菜单一个是添加分类另一个是添加组织机构。鼠标单击其中一个菜单后弹出表单。
可以通过使用Element UI的下拉菜单组件来实现这个需求。
首先,在data中定义一个变量isDialogVisible来控制弹出框的显示与隐藏:
data() {
return {
isDialogVisible: false
}
}
然后,添加一个el-dropdown组件作为按钮的下拉菜单:
<el-dropdown @command="handleCommand">
<el-button type="success" plain>
<i-ep-plus />添加
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="addCategory">添加分类</el-dropdown-item>
<el-dropdown-item command="addOrganization">添加组织机构</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
接着,在methods中定义一个openDialog方法来打开弹出框,并根据传入的参数来判断要显示的表单:
methods: {
openDialog(formType) {
// 根据formType来判断要显示的表单
this.isDialogVisible = true;
},
handleCommand(command) {
if (command === 'addCategory') {
this.openDialog('category');
} else if (command === 'addOrganization') {
this.openDialog('organization');
}
}
}
最后,在模板中添加一个el-dialog组件来显示弹出框:
<el-dialog v-model="isDialogVisible" title="添加分类" :visible.sync="isDialogVisible">
<!-- 表单内容 -->
</el-dialog>
以上代码实现了当鼠标点击按钮的下拉菜单中的某一项时,弹出对应的表单。你可以根据需要自定义表单内容
原文地址: https://www.cveoy.top/t/topic/iwuH 著作权归作者所有。请勿转载和采集!