表格某一列校验不通过,将该列滚动到表格左侧

95 阅读1分钟
      // 表格某一列校验不通过,将该列滚动到表格左侧
      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组件库二次封装的使用方法和自定义指令等,帮你提升开发效率。不定期更新,欢迎交流~