vue el-table搜索高亮变红

272 阅读1分钟

效果图

Snipaste_2021-12-22_14-08-03.png

html部分

      <template v-for="(item, i) in tableConfig">
        <el-table-column :key="i" :label="item.label" :prop="item.prop">
          <template slot-scope="scope">
            <span v-html="scope.row[item.prop]"></span>
          </template>
        </el-table-column>
      </template>

js部分

搜索按钮点击事件搜索后循环数据,匹配名字,替换为包裹数据的变红标签

    async mySearch() {
      await this.getDataOrigin();
      this.tableData.forEach((el, i) => {
        if (el.Name.indexOf(this.queryParams.Keyword) !== -1) {
          el.Name = el.Name.replace(
            this.queryParams.Keyword,
            '<font color="#f00">' + this.queryParams.Keyword + "</font>"
          );
        }
      });
    }