elementUI的表格内容搜索通过高亮锚点定位到可视区域的实现方法

一、交互功能展示：

二、代码实现过程

<template>
  <div class="content-box-container">
    <div class="filter-btn-box">
      <el-input
        v-model="searchTxt"
        placeholder="请输入内容"
        class="search-input"
      ></el-input>
      <el-button type="primary" @click="search">搜索</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      highlight-current-row
      ref="tableDataRef"
      class="table-wrap"
    >
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchTxt: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王一虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王二虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王三虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王四虎",
          address: "上海市普陀区金沙江路 1516 弄"
        },
        {
          date: "2016-05-05",
          name: "王五虎",
          address: "上海市普陀区金沙江路 1520 弄"
        },
        {
          date: "2016-05-06",
          name: "王六虎",
          address: "上海市普陀区金沙江路 1521 弄"
        },
        {
          date: "2016-05-08",
          name: "王七虎",
          address: "上海市普陀区金沙江路 1522 弄"
        },
        {
          date: "2016-05-07",
          name: "王八虎",
          address: "上海市普陀区金沙江路 1523 弄"
        },
        {
          date: "2016-05-09",
          name: "王九虎",
          address: "上海市普陀区金沙江路 1524 弄"
        },
        {
          date: "2016-05-10",
          name: "王十虎",
          address: "上海市普陀区金沙江路 1526 弄"
        },
        {
          date: "2016-05-12",
          name: "王十一虎",
          address: "上海市普陀区金沙江路 1525 弄"
        },
        {
          date: "2016-05-11",
          name: "王十二虎",
          address: "上海市普陀区金沙江路 1527 弄"
        },
        {
          date: "2016-05-13",
          name: "王十三虎",
          address: "上海市普陀区金沙江路 1528 弄"
        },
        {
          date: "2016-05-14",
          name: "王十四虎",
          address: "上海市普陀区金沙江路 1529 弄"
        }
      ]
    };
  },
  methods: {
    search() {
      console.log("search this.searchTxt ==>", this.searchTxt);
      let index = this.tableData.findIndex(item => {
        return item.name == this.searchTxt;
      });
      //上面部分用来定位查询的数据的索引值
      let vm = this.$refs["tableDataRef"].$el;
      vm.querySelectorAll(".el-table__body tr")[index].scrollIntoView();
       //scrollIntoView()函数的作用：方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。
        //setCurrentRow（）作用：用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。
      this.$refs.tableDataRef.setCurrentRow(this.tableData[index]);
    }
  }
};
</script>
<style>
.el-table__body tr.current-row > td {
  background: #ec0808 !important;
}
</style>
<style scoped>
.search-input {
  width: 250px;
  margin-right: 25px;
}
.filter-btn-box {
  margin-bottom: 25px;
}
.table-wrap {
  width: 655px !important;
  height: 240px;
  overflow: auto;
}
</style>

三、记录实现过程

如有需要直接拿来主义，点个赞即可，点赞之交，感谢大家，互相进步。