需求:输入查询条件 点查询,满足模糊查询,将符合的数据筛选出来 并进行定位
html
<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-button
icon="el-icon-search"
@click="
page = 1
handlesearch()
"
/>
</div>
<!-- 表格 -->
<div class="tableDiv">
<el-table
ref="tableD"
:data="tableData"
:header-cell-style="{ background: '#F5F7FA', height: '30px' }"
style="width: 100%; margin: 0 auto"
height="100%"
align="center"
row-key="id"
stripe
border
highlight-current-row
:row-class-name="tableRowClassName"
@select="handleSelectRow"
@row-dblclick="handleRowClick"
>
<el-table-column type="selection" width="40" fixed />
<el-table-column
v-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>
javascript
// 查询的--- > 是做定位 并且红色的数据 不变,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.bodyWrapper
const EL = this.$refs.tableD.bodyWrapper.querySelectorAll('tbody tr')[rowIndex]
const ELOffsetTop = EL.offsetTop
console.log(tableWrapperEL)
tableWrapperEL.scrollTo({
left: 0,
top: ELOffsetTop,
behavior: 'smooth'
})
},