Dialog与Table组件解耦方案

Table

<template>
  <div class="table-wrap">
    <memoDialog ref="memoDialogRef" />
  </div>
</template>

<script setup>
const memoDialogRef = ref();

async function obsolete(row) {
  const action = "canceled";
  const memo = await memoDialogRef.value.openDialog({ action });
  handleExecute(row, action, memo);
}
</script>

Dialog

<template>
  <el-dialog title="标题" v-model="dialogVisible" :before-close="closeDialog">
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="onReset">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
const dialogVisible = ref(false);

function onInit() {
  // 初始化
}
function onReset() {
  // 重置
}
function closeDialog() {
  dialogVisible.value = false;
  onReset();
}
var openDialogPromise;
async function openDialog(...args) {
  dialogVisible.value = true;
  onInit(...args);
  return new Promise((resolve, reject) => {
    openDialogPromise = { resolve, reject };
  });
}
async function submit() {
  // ...
  openDialogPromise.resolve(/* data */);
}

defineExpose({
  openDialog,
});
</script>