The front end nests multiple el-dialogs in el-dialog

1. Application scenarios

• Application scenario: After clicking a button, the first layer dialog box needs to pop up. After filling in the content in the first layer dialog box, click OK to pop up the second layer dialog box, and the content filled in the first layer needs to be passed to the second layer. , a prompt will pop up when reaching the second layer, and then click the confirmation button of the second layer to request the interface and pass the content of the first layer to the backend.
  
  
  

2. Code implementation

<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>