一款vue基于element-ui表格数据筛选搜索关键词高亮变色代码,可以解决table中内容实时搜索及标色。
js代码
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/index.js" ></script>
<script type="text/javascript">
new Vue({
el: '#myVue',
data: {
search: '',
tableData: [{
date: '2015-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2017-05-04',
name: '无浩然',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2017-05-04',
name: '吴浩然',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2018-05-01',
name: '小狮子',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2019-05-03',
name: '大城西',
address: '上海市普陀区金沙江路 1516 弄'
}]
},
computed: {
tables: function () {
const search = this.search
if (search) {
return this.tableData.filter(dataNews => {
return Object.keys(dataNews).some(key => {
return String(dataNews[key]).toLowerCase().indexOf(search) > -1
})
})
}
return this.tableData
}
},
methods: {
showDate (val) {
if (val.indexOf(this.search) !== -1 && this.search !== '') {
return val.replace(this.search, '<font color="#409EFF">' + this.search + '</font>')
} else {
return val
}
}
}
})
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791