前端在el-dialog中嵌套多个el-dialog

前端在el-dialog中嵌套多个el-dialog

一、应用场景二、代码实现

一、应用场景

应用场景：需要点击按钮后弹出第一层对话框，在第一层对话框中填写内容后，再点击确认弹出第二层对话框，且需将第一层填入的内容传递给第二层，再第二层时弹出提示，再通过点击第二层的确认按钮进行请求接口，将第一层的内容 传递给后端

二、代码实现

<template>  <table>    <template #action>      <el-button type="success" @click="outerVisible = true">        修改备注      </el-button>    </template>  </table>  <el-dialog v-model="outerVisible" title="提示" draggable width="520px">    <!-- #default：自定义内容均可写在此处 -->    <template #default>      <!-- 这里的el-form是外层dialog中的表单 -->      <el-form label-width="100px" :model="note">        <el-form-item label="备注" prop="note">          <el-input v-model="note" />        </el-form-item>      </el-form>      <!-- 内嵌的dialog -->      <el-dialog        v-model="innerVisible"        width="30%"        title="提示"        append-to-body        draggable      >        <span>请确认是否发送数据?</span>        <template #footer>          <div class="dialog-footer">            <el-button @click="closeAllDialog">关闭</el-button>            <el-button type="primary" @click="saveConfirm"> 确认 </el-button>          </div>        </template>      </el-dialog>    </template>    <template #footer>      <div class="dialog-footer">        <el-button @click="outerVisible = false">{{          t('global.action.close')        }}</el-button>        <el-button type="primary" @click="innerVisible = true">          {{ t('global.action.confirm') }}        </el-button>      </div>    </template>  </el-dialog></template><script lang="ts">import { defineComponent, reactive } from 'vue';import { Data, sendData } from '@/services/listData';interface ViewState {  selectedOrders: Data[];  note: string;  outerVisible: boolean;  innerVisible: boolean;}export default defineComponent({  name: 'list',  components: {},  setup() {    const state = reactive<ViewState>({      note: '',      outerVisible: false,      innerVisible: false,    });    // 关闭内层对话框的同时也关闭外层的对话框    function closeAllDialog() {      // 关闭内层的对话框      state.innerVisible = false;      // 关闭外层的对话框      state.outerVisible = false;    }    function saveConfirm() {      // 所勾选的id      const selectedIds = selection.value.map(i => {        return i.id;      });      // 这里写请求接口的逻辑      sendData(selectedIds, state.note)        .then(() => {          ElMessage({            type: 'success',            message: '发送成功',          });        })        .finally(() => {          state.innerVisible = false;          state.outerVisible = false;        });    }    return {      ...toRefs(state),      saveConfirm,      closeAllDialog,    };  },});</script><style scoped lang="scss"></style>

本文链接：https://www.kjpai.cn/news/2024-03-28/149891.html，文章来源：网络cs，作者：利杜鹃，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！