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

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

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'
      })
    },
相关推荐
UIUV6 分钟前
var、let 与 const:JavaScript 变量声明的演进与最佳实践
javascript
阿珊和她的猫1 小时前
深入剖析 Vue Router History 路由刷新页面 404 问题:原因与解决之道
前端·javascript·vue.js
@AfeiyuO3 小时前
el-table 表格嵌套表格
前端·elementui·vue
麦麦大数据9 小时前
F032 材料科学文献知识图谱可视化分析系统(四种知识图谱可视化布局) | vue + flask + echarts + d3.js 实现
vue.js·flask·知识图谱·数据可视化·论文文献·1024程序员节·科研图谱
web打印社区10 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
小光学长10 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
YiHanXii12 小时前
this 输出题
前端·javascript·1024程序员节
维他命Coco12 小时前
js常见开发学习
javascript
麦麦大数据12 小时前
F033 vue+neo4j图书智能问答+知识图谱推荐系统 |知识图谱+neo4j+vue+flask+mysql实现代码
vue.js·flask·nlp·neo4j·智能问答·图书·1024程序员节
橙子1991101612 小时前
在 Kotlin 中,ViewModel 的获取
开发语言·vue.js·kotlin