el-table某一行搜索高亮(变色)

650 阅读1分钟

效果图

Snipaste_2021-12-08_13-53-16.png

html部分代码

    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      
      :row-class-name="tableRowClassName" 此处为子元素class函数,返回类名
      
    >
    

数据格式(随便写的不要在意名字)

 tableData: [
        {
          Name: "教学管理",
          Task: "教学",
          Class: "ssh",
          Time: "系统文件",
        },

js代码

循环数组匹配到就返回类名为vi,请不要使用forEach循环 numIndex当前搜索出来的数据索引数组

    tableRowClassName({ row, rowIndex }) {
    循环数组匹配到就返回类名为vi,请不要使用forEach循环
      for (const el in this.numIndex) {
        if (
          rowIndex == this.numIndex[el] &&
          this.numIndex[el] !== 0 &&
          rowIndex !== 0
        ) {
          return "vi";
        }
      }
    },
    this.queryParams.Keyword为搜索输入框绑定数据
    mySearch() {
    判断搜索数据为空则不做任何操作
      if (this.queryParams.Keyword.length <= 0) {
        this.numIndex = [];
        return;
      }
      numIndex当前搜索出来的数据索引数组
      this.numIndex = [];
      this.tableData.forEach((el, i) => {
        if (el.Name.indexOf(this.queryParams.Keyword) !== -1) {
          this.numIndex.push(i);
        }
      });
    },

css代码

请务必带上/deep/样式穿透

/deep/ .vi {
  color: red;
}

结束语

想要他自己移动可以用 scrollTo(0, 800)