通过另一个页面点击事件触发到 :row-class-name 如果是表格内的数据添加 current-row
<div class="content">
<div v-for="(item, index) in form.list" :key="index" ref="listItem">
<div class="station-name">标题:{{ item.title}}</div>
<el-table
ref="table"
:data="item.tableData"
style="width: 400px"
size="mini"
:row-class-name="tableRowClassName"
@row-click="rowClick"
>
</el-table>
</div>
</div>
tableRowClassName({ row, rowIndex }) {
if (
(rowIndex == this.tableIndex && row.cellName == this.tableName) ||
row.click == 'click'
) {
this.className = 'current-row'
this.$nextTick(() => {
let doms = this.$refs.table
let currentDom = document.getElementsByClassName('current-row')[0]
let index = doms.findIndex((e) => {
return e.$el.contains(currentDom)
})
let currentParentTop = this.$refs.listItem[index].offsetTop
let scrollDom = document.getElementsByClassName('content')[0]
scrollDom.scrollTo({
top: currentParentTop,
behavior: 'smooth'
})
})
return this.className
} else {
return ''
}
},
- 获取
this.$refs.table
以及document.getElementsByClassName('current-row')[0]
,并使用findIndex()
方法获取当前行所在的索引。 - 获取
this.$refs.listItem[index].offsetTop
,即当前行所在父级元素(列表项)相对于视口顶部的偏移量。 - 获取
document.getElementsByClassName('content')[0]
并使用scrollTo()
方法将滚动条滚动到当前行所在列表项的位置,实现平滑的滚动效果。