实现表单未填项滚动功能

实现表单未填项滚动功能

在开发表单页面时，经常会遇到需要提示用户填写未填项的需求。为了提升用户体验，我们可以在用户点击提交按钮时，自动将页面滚动到未填项位置，并高亮显示该项，以便用户快速定位并填写。

实现思路

1. 给表单项添加唯一的标识符，比如ID。
2. 当用户点击提交按钮时，遍历所有表单项，检查是否有未填项。
3. 如果有未填项，获取其对应的DOM元素，并通过scrollIntoView方法使其滚动到可视区域内。
4. 同时，可以给未填项添加特定的样式，以便用户更容易地识别。

代码实现

javascript
复制代码
scrollToPosition(key) {
  setTimeout(() => {
    this.currentClickItemKey = key;
    this.colorKey = key;
    const dom = document.querySelector("#" + key);
    dom &&
    dom.scrollIntoView({
      behavior: "smooth", // 平滑过渡
      block: "center" // 上边框与视窗顶部平齐
    });
  }, 1000);
}

使用方法

在提交表单的方法中调用scrollToPosition方法，并传入未填项的标识符。例如：

javascript
复制代码
submitForm() {
  // 检查表单是否填写完整
  if (!this.isFormComplete()) {
    // 获取未填项的标识符
    const unfilledItemKey = this.getUnfilledItemKey();
    // 滚动到未填项位置
    this.scrollToPosition(unfilledItemKey);
    // 提示用户填写完整表单
    this.$message.error('请填写完整的表单！');
    return;
  }
  // 提交表单逻辑...
}

效果展示

通过实现这个功能，我们可以为用户提供更友好的填写表单体验，减少因未填项导致的错误提交。