el-table 中的滚动条 工具

src/utils/el-table-scroll.js

@@ -1,22 +1,39 @@
+/**
+ * el-table 中跳转到指定下标
+ * @param tableRef 表格的ref
+ * @param index 下标
+ */
 export const setScrollTop = (tableRef, index) => {
-  tableRef.setScrollTop(getScrollTop(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
-  }
+    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',
-  })
+    tableRef.setCurrentRow(columnData)
+    tableRef.scrollTo({
+        top: getScrollTop(tableRef, columnIndex),
+        left: 0,
+        behavior: 'smooth',
+    })
 }