在实现一个点击tab可以滚动到el-table对应位置这样看似简单的功能背后，其实涉及到了页面布局、DOM操作、事件处理等多个方面的考量和实现细节。
首先，要实现这个功能，需要考虑以下几个方面：
- 页面结构：页面中
el-table和tab之间的布局关系，确保tab和el-table之间存在某种映射关系，可以通过索引、ID等方式进行对应。 - 事件绑定：需要为tab添加点击事件监听器，当用户点击某个tab时，触发相应的滚动操作。
- 滚动效果：滚动到
el-table对应位置时，可以平滑滚动或者直接滚动到目标位置，根据用户体验和需求来选择合适的滚动方式。 - 位置计算：需要计算出
el-table对应位置的相对位置或者绝对位置，以便进行滚动操作。 - 兼容性：要考虑不同浏览器的兼容性，确保功能在各种主流浏览器上都能正常运行。
- 性能优化：在处理滚动操作时，要考虑性能优化，避免频繁的重绘和重排，尽量减少性能损耗。
实现这个功能需要综合考虑以上方面，通过合理的布局和事件处理，结合滚动操作的计算和效果，可以实现一个用户友好且流畅的点击tab滚动到el-table对应位置的功能。在开发过程中，可以不断测试和优化，确保功能稳定性和用户体验。
思路
思路：
1.先画一个tab和table
2.点击拿到对应的列
3.拿到el-table的实例对象，并滚动
看着很简单是吧~
需要的dom元素，分别是el-table和el-tabs
<el-tabs v-model="activeTab" class="el-tabs" @tab-click="handleTabClick">
<el-tab-pane
v-for="(column, index) in mainColumns"
:key="index"
:label="column.label"
:name="column.prop"
>
</el-tab-pane>
</el-tabs>
<el-table
ref="multiTable"
:data="tableList"
border
style="width: 100%"
:row-key="getRowKey"
:tree-props="{ children: 'childrenList' }"
show-summary
:summary-method="getSummaries"
>
<el-table-column label="归属部门" prop="name" width="180" :fixed="true">
</el-table-column>
....
</el-table>
点击跳转方法，这里获取对应的th
handleTabClick(tab) {
const columnIndex = Number(tab.index) + 1
const table = this.$refs.multiTable
// 获取表格dom
const scrollContainer = table.bodyWrapper
// 获取table的header
const targetColumn = table.$el.querySelectorAll(
'.el-table__header-wrapper th'
)[columnIndex]
const fixedWidth = table.$el.querySelectorAll(
'.el-table__header-wrapper th'
)[0].offsetWidth
if (targetColumn) {
scrollContainer.scrollLeft = targetColumn.offsetLeft
}
}
定义的mainCoumns，这里面的index就是对应的列，如果是多级表头的话，是拿到对应的第一级表头
mainColumns: [
{ index: 1, label: 'xxx' },
{ index: 2, label: 'xxxx' },
{ index: 3, label: 'xxxxxx' },
{ index: 4, label: 'zz' },
{ index: 5, label: 'dd' }
],
可以了，然后点击，咦，滚动了，但是好像有点不准确
打印dom看看，里面只有一个offsetLeft，也没有其他
然后看了一下，好像我的表格跟正常的不一样，左边是固定列，是不是这个原因导致的，之前也有bug也是因为这个导致，那就减去固定列的宽度，先减去180宽度，点击跳转，准确了
注意：点击跳转方法，这里获取对应的th，然后要减去左边固定列的宽度，没有减去会导致位置不准确
总结
这里要考虑的点还是比较多的
首先还是要使用prop来获取指定某一列的（这里都是前端实现，所以就简化一下，直接使用index），其次是使用变量来获取固定列的宽度，避免后期维护的困难
