<template>
<input type="search" v-model="search" placeholder="请输入关键字"/>
<p v-for="(item,index) tables">
<span v-html=“showDate(index)”><span/>
<p/>
</template>
<script>
export default {
data(){
return{
tableData:[],
search:''
}
}
computed: {
// 实时监听表格
tables: function() {
const search = this.search
if (search) {
return this.tableData.filter(T => {
return Object.keys(T).some(key => {
return String(T[key]).toLowerCase().indexOf(search) > -1
})
})
}
return this.tableData
}
},
mounted() {},
methods: {
// 筛选变色
showDate(val) {
val = val + '';
if (val.indexOf(this.search) !== -1 && this.search !== '') {
return val.replace(this.search, '<font color="#409EFF">' + this.search + '</font>')
} else {
return val
}
}
}
}
</script>