el-table表格搜索跳转定位功能

搜索需要查询到的某条数据,然后点击定位滚到查询数据并且高亮功能

给el-table添加highlight-current-row属性,这样定位之后可以给某条数据高亮

1.首先获取需要的数据

let index=this.tableData.findIndex(item=>{

return item.id==this.id

})

//@scrollIntoView()让元素出现在可视范围

拿到这个dom元素,调用scrollIntoView()方法

let vm=this.$refs['tableDataRef'].$el

vm.querySelecttorAll('.el-table__body tr')[index].scrollIntoView()

//让定位到的这条数据产生高亮效果

this.$refs.tableDataRef.setCurrentRow(this.tableData[index])