前端在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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107