el-table 动态滚动到指定行和指定列

HeXin_

已于 2023-06-25 13:52:23 修改

阅读量6.1k

点赞数 12

CC 4.0 BY-SA版权

分类专栏： elemnt-ui 文章标签： vue.js elementui 前端 javascript

于 2023-06-25 13:49:14 首次发布

本文链接：https://blog.csdn.net/HeXin_/article/details/131375958

elemnt-ui 专栏收录该内容

1 篇文章

订阅专栏

该文章提供了两个JavaScript函数，分别用于在el-table组件中滚动到特定列和行。函数接受表格元素引用、列索引或行索引作为参数，通过计算offsetWidth和offsetHeight来设置滚动位置，从而实现定位功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

滚动到表格某一列

/**
 *  el-table滚动到表格某一列
 *  @param {object} tableElement  表格元素(this.$refs['表格ref值'])
 *  @param {Number} columnIndex   滚动到第几列(从0开始)
 *  @param {Number} fixedNum   表格左侧固定列个数(没有固定列,可不传)

 */
const tableScrollToColumn = (tableElement, columnIndex, fixedNum = 0) => {
  const theTableRow = tableElement.bodyWrapper.querySelector('.el-table__body tbody .el-table__row')
  let scrollLeft = 0
  for (let i = fixedNum; i < theTableRow.children.length; i++) {
    if (i == columnIndex) {
      break
    }
    scrollLeft += theTableRow.children[i].offsetWidth
  }
  tableElement.bodyWrapper.scrollLeft = scrollLeft
}

调用示例

tableScrollToColumn(this.$refs.editTable, 7, 1)

滚动到表格某一行

/**
 *  el-table滚动到表格某一行
 *  @param {object} tableElement  表格元素(this.$refs['表格ref值'])
 *  @param {Number} rowIndex   滚动到第几行(从0开始)
 */
const tableScrollToRow = (tableElement, rowIndex) => {
  const theTableRows = tableElement.bodyWrapper.querySelectorAll('.el-table__body tbody .el-table__row')
  let scrollTop = 0
  for (let i = 0; i < theTableRows.length; i++) {
    if (i === rowIndex) {
      break
    }
    scrollTop += theTableRows[i].offsetHeight
  }
  tableElement.bodyWrapper.scrollTop = scrollTop
}

调用示例

tableScrollToRow(this.$refs.editTable, 6)