首页 网站特效 PHP/Mysql 网站模板 视频教程 整站源码 云服务器 免责声明

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

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

更新时间:2018-06-06 码币:1
357058607
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>


  • 收藏
  • 投诉
评论列表