vue+elementUI表格关键字筛选高亮

   <!-- 筛选 -->

        <div class="screen">

            <div style="width:30%">筛选：</div>

            <el-input

                type="search"

                v-model="search"

                style="width:70%"

                placeholder="请输入关键字"

            ></el-input>

        </div>

        <!-- 表格 -->

        <el-table :data="tableData" style="width: 100%" max-height="500">

            <!-- 地址 -->

            <el-table-column

                v-for="(item, index) in Object.keys(tableData[0])"

                :key="index"

                :label="item"

            >

                <template slot-scope="scope">

                    <span

                        class="col-cont"

                        v-html="showDate(scope.row[item])"

                    ></span>

                </template>

            </el-table-column>

        </el-table>

 

   // 筛选变色

        showDate(val) {

            val = val + ''

            console.log('val', val)

            if (val.indexOf(this.search) !== -1 && this.search !== '') {

                return val.replace(

                    this.search,

                    '<font color="#409EFF">' + this.search + '</font>'

                )

            } else {

                return val

            }

        },

 实现效果如下：

 

 

 

 

 

 参考文章：https://blog.****.net/zuorishu/article/details/80899398