vue3 + element-plus 对话框滚动条回到顶部

代码示例

import type { ElDialog } from "element-plus";

// ========== 模板实例引用（Template Refs） ==========
// 对话框实例
const dialogRef = ref<InstanceType<typeof ElDialog> | null>(null);

// ========== 公共方法（对外暴露） ==========
/**
 * 打开对话框
 */
const openDialog = async () => {
  // 获取受理样品信息
  await applyModifyStore.fetchApplySamples();
  dialogVisible.value = true;

  // ⏳ 等待 DOM 更新完成
  nextTick();

  // ---------- 对话框滚动条回到顶部（测试发现没有功能代码，也有回顶效果） ----------
  // 方法1：直接操作 DOM，el-overlay-dialog 或 el-dialog__body
  // (document.querySelector(".el-overlay-dialog") as HTMLElement)?.scrollTo(0, 0);

  // 方法2：使用模板实例引用
  // const scrollContainer = dialogRef.value?.$el.querySelector(".el-overlay-dialog") as HTMLElement | null;
  // scrollContainer?.scrollTo(0, 0);

  // 方法3：使用 el-dialog 的 opened 事件 @opened="handleDialogOpened"
  // const handleDialogOpened = () => {
  //   const scrollContainer = dialogRef.value?.$el.querySelector(".el-dialog__body") as HTMLElement | null;
  //   scrollContainer?.scrollTo(0, 0);
  // };
};