// 表格某一列校验不通过,将该列滚动到表格左侧
scrollToFirstError() {
this.$nextTick(() => {
const tableWrapper = this.$refs.tableRef.$el.querySelector('.el-table__body-wrapper')
const errEle = this.$refs.tableRef.$el.querySelector('.is-error')
if (errEle) {
const tableRect = tableWrapper.getBoundingClientRect()
const rect = errEle.getBoundingClientRect()
const offset = rect.left - tableRect.left
tableWrapper.scrollLeft += offset
}
})
},
使用scrollIntoView(通过设置inline属性):
errEle.scrollIntoView({
behavior: 'smooth', // 滚动行为(平滑滚动)
block: 'nearest', // 垂直对齐方式,可以是 'start', 'center', 'end', 或 'nearest'
inline: 'start', // 水平对齐方式,可以是 'start', 'center', 'end', 或 'nearest'
})
如果你觉得这篇文章对你有用,可以看看作者封装的库xtt-utils,里面封装了非常实用的js方法。如果你也是vue开发者,那更好了,除了常用的api,还有大量的基于element-ui组件库二次封装的使用方法和自定义指令等,帮你提升开发效率。不定期更新,欢迎交流~