vue基于element-ui表格数据筛选搜索关键词高亮变色代码免费下载

一款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>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录