el-table前端做高亮滚动查找 --------自己看的

html代码：



<el-input class=“auto-name” v-model=“queryParams.name” @input=“findData” placeholder=“请输入人员姓名或用户名” clearable style=“width:240px”>
{{findCurrentIndex + 1}}/{{highlightDom.length}}


<el-button size=“mini” type=“text” @click=“findUpData”>上一个
<el-button size=“mini” type=“text” @click=“findDownData”>下一个

{{scope.row.user.username}}

js: 代码片段
data() {
return {
findCurrentIndex: -1,
highlightDom: []
}
}

methods: {
findData() {
this.findCurrentIndex = -1
this.highlightDom = []
this.$nextTick(() => {
this.highlightDom = document.getElementsByClassName(‘highlight’)
if (this.highlightDom.length) {
this.findCurrentIndex = 0
this.scrollIntoView()
}
})
},
scrollIntoView() {
this.highlightDom[this.findCurrentIndex].classList.add(“findhighlight”)
this.highlightDom[this.findCurrentIndex].scrollIntoView({
block: “start”,
behavior: “smooth”
});
},
findUpData() {
this.highlightDom[this.findCurrentIndex].classList.remove(“findhighlight”)
if (this.findCurrentIndex == 0) {
this.findCurrentIndex = this.highlightDom.length - 1
} else {
this.findCurrentIndex -= 1
}
this.scrollIntoView()
},
findDownData() {
this.highlightDom[this.findCurrentIndex].classList.remove(“findhighlight”)
if (this.findCurrentIndex == this.highlightDom.length - 1) {
this.findCurrentIndex = 0
} else {
this.findCurrentIndex += 1
}
this.scrollIntoView()
},
}

css代码：
.highlight {
background-color: #ffff96;
}
.findhighlight {
background-color: #ff9632;
}