头像

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

来源:http://www.sucaihuo.com/js/3729 素材火管理员 2018-06-05 12:03浏览(1727) 收藏

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

程序员,你不是一个人;网站开发QQ群:698377651,在线充值,或联系QQ3401083589直接充值

查看演示 下载资源: 30 下载资源 下载积分: 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>
最新交易
评论3
头像

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

1 2