在VUE3中使用el-form时如果字段过多并出现滚动条时,当某个字段验证出错恰好出错的字段并不在可视区域时,需要用户自己上下拖动滚动条查找是那个字段验证出错,用户体验不好。所以在查看了官方文档后发现官方已经实现了,故此记录一下。
- 官方文档如下:
- 通过查看这个回调函数的类型声明发现,拥有两个参数。
- 第二个参数是未通过验证的字段
至此我们可以在验证的回调函数中拿到未通过验证的字段,接下来就是考虑如何控制滚动条的位置。
- 文档中也定义了用于滚动到指定字段的API
- 代码示例:
const formRef = ref();
formRef.value.validate(async(valid,invalidFields)=>{
if(invalidFields) formRef.value.scrollToField(Object.keys(invalidFields)[0])
if(!valid)return;
})