本文实例为大家分享了vue elementUI表格关键字筛选高亮的具体代码，供大家参考，具体内容如下

代码：

模板div class=' ' div class=' top '！-筛选-div class=' screen ' div style=' width :30% '筛选：/div El-输入类型=' search ' v-model=' search ' style=' width :70% '占位符='请输入关键字/el-input /div /div！-表格-div class=' table ' El-table : data=' tables ' style=' width : 100% '最大高度=500!-地址埃尔表列标签='时间模板槽-作用域=' scope ' span class=' col-cont ' v-html=' show date(scope。划船。日期)'/span/模板/El-表格-列！-用户名埃尔表列标签='用户名模板槽-作用域=' scope ' span class=' col-cont ' v-html=' show date(scope。划船。名称)'/span/template/El-table-column！-地址埃尔表列标签='地址模板槽-作用域=' scope ' span class=' col-cont ' v-html=' show date(scope。划船。地址)'/span/模板/El-表-列/El-表/div/div/模板脚本导出默认{ data(){ return { search : }，table data :[{ date : ' 2016-05-02 '，name: '张三，地址： '上海市普陀区金沙江路1518 弄}，{ date: '2016-05-04 '，name: '李四，地址： '上海市普陀区金沙江路1517 弄}，{ date: '2016-05-01 '，name: '王五，地址： '上海市普陀区金沙江路1519 弄}，{ date: '2016-05-03 '，name: '赵六，地址： '上海市普陀区金沙江路1516 弄}] } }，components: { }，computed: { //实时监听表格表格：函数(){ const search=this。搜索if(search){返回此。tabledata。筛选器(dataNews={ return object。按键(数据新闻).一些（键={返回字符串（数据新闻[键])。toLowerCase().indexOf(搜索)-1 }) })返回this.tableData } }，mounted() {}，methods: { //筛选变色显示日期(val){ val=val " "；if (val.indexOf(this.search)！==-1 this.search！==' '){返回值。替换(这个。搜索“font color=' # 409 eff ' ' this”。搜索'/font ')} else { return val } } } }/script效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。