html表格里的文字怎么变色,基于element 文字搜索表格数据筛选变色代码

特效描述：基于element 文字搜索 表格数据 筛选变色代码，输入框文字搜索表格数据筛选变色代码

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

微信：173-1921-5632或微信：MRJYZX-15-04-16

本人个人主页：wuhaoran0409.github.io

这是一款基于element-ui中的table组件拓展的。可以解决table中内容实时搜索及标色。还可以有更炫的table样式，加微信交流

:data="tables"

style="width: 100%">

label="日期"

width="180">

label="姓名"

width="180">

label="地址">

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, '' + this.search + '')

} else {

return val

}

}

}

})