/** * 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', }) }