elementuiplus设置scroll-to-error之后 提示被遮挡的解决方案

在Element Plus中，如果你设置了表单验证错误时滚动到错误的组件（即scroll-to-error），可能会出现提示被其他元素遮挡的问题。要解决这个问题，你可以在滚动之前手动调整滚动位置，使得提示可以正确显示。

以下是一个简单的解决方案示例：

// 假设你有一个Element Plus表单实例
const formRef = ref(null);
 
// 当你触发表单验证时
formRef.value.validate((valid, fields) => {
  if (!valid) {
    // 获取第一个错误的DOM元素
    const errorField = document.querySelector('.el-form-item__error');
    if (errorField) {
      // 手动计算滚动位置
      const scrollTop = errorField.offsetTop - errorField.scrollTop - 100; // 100是一个偏移量，根据实际情况调整
      window.scrollTo({
        top: scrollTop,
        behavior: 'smooth'
      });
    }
  }
});

在这个示例中，我们通过查询选择器.el-form-item__error获取到了错误提示的DOM元素。然后计算了该元素相对于当前可视窗口的位置，并通过window.scrollTo方法滚动到适当的位置。100是一个示例偏移量，你可能需要根据你的页面布局调整这个值，以确保错误提示不会被遮挡。使用平滑滚动(behavior: 'smooth')可以提供更好的用户体验。