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

代码：

< template >

    < div class= "" >

        < div class= "top" >

        

            < div class= "screen" >

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

                < el-input type= "search" v-model="search" style= "width:70%" placeholder= "请输入关键字" > el-input >

             div >

         div >

        

        < div class= "table" >

            < el-table

                :data="tables"

                style= "width: 100%"

                max-height= 500 >

            

                < el-table-column label= "时间" >

                    < template slot-scope= "scope" >    

                        < span class= "col-cont" v-html=" showDate( scope. row. date)" > span >

                     template >

                 el-table-column >

                

                < el-table-column label= "用户名" >

                    < template slot-scope= "scope" >

                        < span class= "col-cont" v-html=" showDate( scope. row. name)" > span >

                     template >

                 el-table-column >

                

                < el-table-column label= "地址" >

                    < template slot-scope= "scope" >

                        < span class= "col-cont" v-html=" showDate( scope. row. address)" > span >

                     template >

                 el-table-column >    

             el-table >

         div >

     div >

template >

< script >

    export default {

        data() {

            return {

                search: '',

                tableData: [{

                    date: '2016-05-02',

                    name: '张三',

                    address: '上海市普陀区金沙江路 1518 弄'

                }, {

                    date: '2016-05-04',

                    name: '李四',

                    address: '上海市普陀区金沙江路 1517 弄'

                }, {

                    date: '2016-05-01',

                    name: '王五',

                    address: '上海市普陀区金沙江路 1519 弄'

                }, {

                    date: '2016-05-03',

                    name: '赵六',

                    address: '上海市普陀区金沙江路 1516 弄'

                }]

            }

        },

        components: {},

        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

            }

        },

        mounted() {},

        methods: {

            // 筛选变色

            showDate( val) {

                val = val + '';

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

                    return val. replace( this. search, '' + this. search + '')

                } else {

                    return val

                }

            }

        }

    }

script >