el-table按照查询条件再对应行数据进行高亮,并可以定位到某行

需求：输入查询条件 点查询，满足模糊查询，将符合的数据筛选出来 并进行定位

      <div style="display: flex"><el-input v-model="searchData.content" clearable placeholder="零件特征" style="width: 12%;" /><el-input v-model="searchData.searchPara" clearable placeholder="扭矩值" style="width: 12%;" /><el-buttonicon="el-icon-search"@click="page = 1handlesearch()"/></div><!-- 表格 --><div class="tableDiv"><el-tableref="tableD":data="tableData":header-cell-style="{ background: '#F5F7FA', height: '30px' }"style="width: 100%; margin: 0 auto"height="100%"align="center"row-key="id"stripeborderhighlight-current-row:row-class-name="tableRowClassName"@select="handleSelectRow"@row-dblclick="handleRowClick"><el-table-column type="selection" width="40" fixed /><el-table-columnv-for="(item, index) in viewColumns":key="index":fixed="item.fixed":prop="item.prop":align="item.align":label="item.label":min-width="item.width":show-overflow-tooltip="true"/></el-table></div>

   // 查询的--- > 是做定位 并且红色的数据 不变，oldPartFeature只是一个记录的作用handlesearch() {if (this.searchData.content == '' && this.searchData.searchPara == '') return this.$message.warning('请输入查询值!')if (this.searchData.content && this.searchData.searchPara) {// 两个值都存在的情况下this.tableSearch()} else if (this.searchData.content && this.searchData.searchPara == '') {this.tableSearchContent()} else if (this.searchData.searchPara && this.searchData.content == '') {this.tableSearchPara()}},tableSearch() {const filterList = this.tableData.filter((item) => item?.part_feature.includes(this.searchData.content) && item?.make_mid.includes(this.searchData.searchPara))if (filterList.length == 0) return this.$message.warning('无匹配项')if (this.oldPartFeature == '' || this.oldPartFeature !== this.searchData.content || this.oldPartFeature !== this.searchData.searchPara) {this.oldPartFeature = JSON.parse(JSON.stringify(this.searchData.content || this.searchData.searchPara))this.ind = 0} else {if (this.ind >= filterList.length - 1) {this.idx = 0}this.tablelocation(filterList[this.idx])this.idx++}},tableSearchContent() {const filterList = this.tableData.filter((item) => item?.part_feature.includes(this.searchData.content))if (filterList.length == 0) return this.$message.warning('无匹配项')if (this.oldPartFeature == '' || this.oldPartFeature !== this.searchData.content) {this.oldPartFeature = JSON.parse(JSON.stringify(this.searchData.content))this.ind = 0} else {if (this.ind >= filterList.length - 1) {this.idx = 0}this.tablelocation(filterList[this.idx])this.idx++}},tableSearchPara() {const filterList = this.tableData.filter((item) => item.make_mid ? item.make_mid.includes(this.searchData.searchPara) : '')if (filterList.length == 0) return this.$message.warning('无匹配项')if (this.oldPartFeature == '' || this.oldPartFeature !== this.searchData.searchPara) {this.oldPartFeature = JSON.parse(JSON.stringify(this.searchData.searchPara))this.ind = 0} else {if (this.ind >= filterList.length - 1) {this.idx = 0}this.tablelocation(filterList[this.idx])this.idx++}},
//定位高亮tablelocation(data) {this.$refs.tableD.setCurrentRow(data)const rowIndex = this.tableData.findIndex((item) => {return item.id == data.id})const tableWrapperEL = this.$refs.tableD.bodyWrapperconst EL = this.$refs.tableD.bodyWrapper.querySelectorAll('tbody tr')[rowIndex]const ELOffsetTop = EL.offsetTopconsole.log(tableWrapperEL)tableWrapperEL.scrollTo({left: 0,top: ELOffsetTop,behavior: 'smooth'})},