element plus 弹窗里边增加可以选择的按钮，弹窗按钮，菜单按钮。vue3 弹窗里边下载模板 电脑版发表于：2025/5/14 11:03 [TOC] ### 效果一 效果图： <img src="https://img.tnblog.net/arcimg/xiuxin3/0e379456c170473dacb410e566569c31.png" style="width:466px;height:auto;"> **view** ``` <el-link :underline="false" type="primary" @click="openStatisticsVisible(scope.row)">统计</el-link> <el-dialog v-model="statisticsVisible" title="统计" width="399"> <div style="width: 100%; display: flex; justify-content: space-around"> <el-button type="primary" :icon="Star" plain>收费统计</el-button> <el-button type="success" :icon="Star" plain>用水户统计</el-button> </div> </el-dialog> ``` **ts:** ``` const statisticsVisible = ref(false); const openStatisticsVisible = (data:any) => { statisticsVisible.value = true; }; ``` ### 效果二 下载模板的 ``` <el-dialog v-model="state.importTemplateDialogVisible" title="导入模板下载" width="500"> <div style="width: 100%; display: flex; justify-content: space-around"> <el-button type="primary" @click="downLoadFileFromName('6d21321b90e34346a99c5cb54599d90e', '培训任务导入模板')" :icon="Download" plain >培训任务导入模板</el-button > <el-button type="success" @click="downLoadFileFromName('b03e5fcd3fbe4aa69bdad570ff81d74c', '培训项目导入模板')" :icon="Download" plain >培训项目导入模板</el-button > </div> </el-dialog> <el-dialog v-model="state.importDialogVisible" title="证书导入" width="399"> <div style="width: 100%; display: flex; justify-content: space-around"> <el-button type="primary" @click="openChoiseFile" :icon="Plus" plain>导入证书</el-button> <el-button type="success" @click="openChoiseCreateFile" :icon="Plus" plain>批量生成证书</el-button> </div> </el-dialog> ``` 图标的导入： ``` import { Search, Plus, Edit, Download } from '@element-plus/icons-vue' ```
