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

在Element UI的表格中实现搜索关键字高亮并锚点定位到可视区域，可以通过自定义列模板和使用第三方库如highlight.js来实现关键字的高亮显示。以下是一个基本的实现示例：

1. 安装highlight.js：

npm install highlight.js --save

2. 在组件中引入并使用highlight.js：

import hljs from 'highlight.js';
 
export default {
  data() {
    return {
      tableData: [
        // ... 数据源
      ],
      searchKey: '' // 搜索关键词
    };
  },
  methods: {
    highlight(text) {
      if (this.searchKey) {
        const highlighted = text.replace(new RegExp(this.searchKey, 'gi'), match => {
          return `<span class="hljs-keyword">${match}</span>`;
        });
        return hljs.highlightAuto(highlighted).value;
      } else {
        return text;
      }
    }
  }
};

3. 在模板中使用自定义列模板和v-html指令显示高亮后的内容：

<template>
  <el-table :data="tableData">
    <!-- 其他列 -->
    <el-table-column label="内容">
      <template slot-scope="scope">
        <div v-html="highlight(scope.row.content)"></div>
      </template>
    </el-table-column>
  </el-table>
  <el-input v-model="searchKey" @input="handleInput"></el-input>
</template>

4. 实现锚点定位到可视区域的逻辑：

// 在methods中添加
methods: {
  handleInput() {
    this.$nextTick(() => {
      // 使用querySelectorAll选中所有高亮的关键字元素
      const highlights = document.querySelectorAll('.hljs-keyword');
      // 遍历并滚动到视图中
      highlights.forEach(highlight => {
        highlight.scrollIntoView({
          behavior: 'smooth'
        });
      });
    });
  }
}

这样就可以在输入搜索关键词后，通过highlight方法对表格内容中的关键字进行高亮显示，并且使用scrollIntoView方法将锚点定位到可视区域，提升用户体验。