Vue实现通过数据找到对应的DOM节点

利用Vue实现搜索功能

已知搜索框获取到的输入值，匹配页面中的节点，找到当前搜索值对应的DOM节点，并且给当前DOM节点添加class或者样式进行高亮显示。

el-input部分代码：

<el-input placeholder="输入关键字" v-model="searchVal" @keyup.enter.native="onEnterSearch($event,searchVal)" clearable>
	<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>

vue找DOM节点可以通过添加ref属性，通过this.$refs就可以获取这个DOM节点。
由于此部分功能使用了element的el-tab组件，每个tab栏下都有不同的div菜单，搜索功能需要进行全局搜索。

html菜单部分代码：

<el-tab-pane label="标准化" name="first" ref="first">
	<el-row class="icons-title ly-flex" v-for="items in titles" style="height: 20%;">
    	<div v-for="item in items.row" class="flex-pf ly-flex">
        	<div class="flex-title ly-flex-col">
            	<img :src="imgSrc(item)" height="50%" style="padding: 5%;">
                <p style="padding: 5%;">{{item.name}}</p>
            </div>
        </div>
    </el-row>
</el-tab-panel>

数据定义部分：

data: {
	activeName: 'first',	//当前tab栏
	titles: [
    	{
        	rowid: 1,
            type: '',
            path: '',
            row: [
            	{
                	id: 1,
                    name: '事件',
                    path: 'bzhfw/sj.png',
                    type: 'first'
                }
            ],
        }
    ]
}

搜索方法部分：

onEnterSearch: function (e, searchVal) {
	var _this = this;
    console.log("search: " + _this.searchVal);
    _this.totalDatas.map(function (z) {
    	if (z.name == _this.searchVal) {	//searchVal为el-input的输入值，节点名称作为搜索匹配条件
        	var temp = z.type;		//通过数据获取当前的tab栏
            _this.activeName = temp;	//跳转到对应tab栏
            console.log('*****this******');
            console.log(_this.$refs[temp].$children);
            _this.$refs[temp].$children.map(function (i) {
            	var domTempArr = i.$el.children;
                console.log(domTempArr);
                var elemArr = Array.prototype.slice.call(domTempArr);//转化为数组，否则报map方法错误
                elemArr.map(function (k) {
                	if (k.innerText.replace(/\s*/g, "") == _this.searchVal) {	//去除字符串空格后进行判断匹配
                    	k.classList.add("ly-highlight");	//给当前节点添加高亮样式
                        _this.searchVal = '';	//清空输入框的历史搜索记录
                    };
                    setTimeout(function () {
                    	k.classList.remove("ly-highlight");		//5秒后去掉高亮样式
                    }, 5000);
                 })
            })
		}
	})
}