一、应用场景
- 应用场景:需要点击按钮后弹出第一层对话框,在第一层对话框中填写内容后,再点击确认弹出第二层对话框,且需将第一层填入的内容传递给第二层,再第二层时弹出提示,再通过点击第二层的确认按钮进行请求接口,将第一层的内容 传递给后端
二、代码实现
<template>
<table>
<template #action>
<el-button type="su***ess" @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 { define***ponent, reactive } from 'vue';
import { Data, sendData } from '@/services/listData';
interface ViewState {
selectedOrders: Data[];
note: string;
outerVisible: boolean;
innerVisible: boolean;
}
export default define***ponent({
name: 'list',
***ponents: {},
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: 'su***ess',
message: '发送成功',
});
})
.finally(() => {
state.innerVisible = false;
state.outerVisible = false;
});
}
return {
...toRefs(state),
saveConfirm,
closeAllDialog,
};
},
});
</script>
<style scoped lang="scss"></style>