web_dist/src/utils/el-table-scroll.js

/**
 * el-table 中跳转到指定下标
 * @param tableRef 表格的ref
 * @param index 下标
 */
export const setScrollTop = (tableRef, index) => {
    tableRef.setScrollTop(getScrollTop(tableRef, index))
}

/**
 * 计算想要数据距离表格的顶部距离
 * @param tableRef 表格
 * @param index 下标
 * @returns {number} 返回距离头部的距离
 */
export const getScrollTop = (tableRef, index) => {
    try {
        const targetTop = tableRef.$el.querySelectorAll('.el-table__body tr')[index].getBoundingClientRect().top //该行的位置
        const containerTop = tableRef.$el.querySelector('.el-table__body').getBoundingClientRect().top //body的位置
        return targetTop - containerTop
    } catch (e) {
        return 0
    }
}

/**
 * 根据数据的下标平滑的显示那个人的信息并且高亮
 * @param tableRef 表格
 * @param columnIndex 下标
 * @param columnData 要高亮的数据信息
 */
export function smoothScrollTableColumn(tableRef, columnIndex, columnData) {
    tableRef.setCurrentRow(columnData)
    tableRef.scrollTo({
        top: getScrollTop(tableRef, columnIndex),
        left: 0,
        behavior: 'smooth',
    })
}