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

来源:https://www.sucaihuo.com/js/3729.html 2018-06-05 12:03浏览(7219) 收藏

一款vue基于element-ui表格数据筛选搜索关键词高亮变色代码,可以解决table中内容实时搜索及标色。
vue基于element-ui表格数据筛选搜索关键词高亮变色代码
分类:表单代码 > 筛选 难易:中级
查看演示 下载资源 下载积分: 20 积分

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
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2