element-ui中el-tree组件的节点过滤中的关键字⾼亮实现angular.js、react.js、vue.js
现在前端主流的三⼤框架中，从17年开始⼜以vue最为⽕爆。⽽三⼤框架更多的偏向于js交互层⾯，⽽在ui层⾯⾥呢，饿了么外卖的那个element-ui是使⽤vue时组件覆盖⾯较为全⾯的了。
⽬前在⽤到<el-tree></el-tree>便签时，发现了原⽣并没有⽀持⾼亮检索词属性。⽽树形结构在查东西时，对于不太熟悉的⼈来说确实不太友好。所以，就简单通过jquery简陋的做了个动态⾼亮显⽰检索词的功能。
使⽤前提：
<el-tree></el-tree>      :filter-node-method属性      filter()属性
整体思路和⽹上⾼亮显⽰检索词的是⼀样的
第⼀步：拿到检索关键字、并且拿到检索后显⽰的数据
第⼆步：动态写⼊html '<span >' + val + </span>''
第三步：动态的清除html内容中的 '<span >'和‘</span>’内容
其中其实⽐较⿇烦的有两点： ⼀是如何获取到被过滤后的节点，⼆是修改html内容的时序问题
第⼀点，其实通过控制台的Elements选项卡中可以拿到。通过class属性可以看出来，其中的过滤是会将不符合添加的叶⼦节点加上 is-hidden的class 隐藏起来。 故通过
$('.el-tree-node .is-focusable .el-tree-node__content span:nth-child(2)')
可拿到过滤节点的label内容
第⼆点，其实是代码的插⼊点  在检索时整个过程⽤到了三个⽅法
1. vm.watch监听 input框值的变化
2. 输⼊框的input事件（不能⽤change事件，因为change事件是在值发⽣变化且失去焦点的情况下），⽤来根据⽤户输⼊的值对节点树
着⾊
3. vm.$refs.节点树.filter(val)⽅法
默认执⾏顺序为：⽤户val==>@input事件==》watch监听（val:function() ==>vm.$refs.节点树ref.filter(
val)）
input框值发⽣变化，触发input事件，接着触发watch监听，然后在watch监听中，将拿到的val值传⼊vm.$refs.节点树.filter(val)⽅法循环遍历过滤节点树节点，最后渲染。但是这样的话，input⾥⾯的事件进先执⾏了，这时候过滤节点还没有渲染就拿不到，也就上不了⾊了。（但是，你可能会说，为什么不放到watch⾥⾯filter⽅法之后呢，我放了，但是确实不管⽤...  没有具体研究watch的机制，后⾯有时间的话会看⼀下）
于是，我们改变⼀下时序。通过在@input⽅法中，将⽅法体包在延时函数setTimeout()中。于是就变成了
val==》watch监听（清除颜⾊代码==》val:function() ==>vm.$refs.节点树ref.filter(val)）==>@input事件（上⾊代码）
附两个⽅法代码参考，有更好的⽅案欢迎指教~~
//注意有个⼩坑，就是在上⾊的时候，<span ></span>中的color: red中最好是有个空格，在Chrome下，你写什么就是什么没有关系。但在IE下，它会
watch: {
jquery是什么功能组件
filterText: function(val) {
var arr = $('.el-tree-node .is-focusable .el-tree-node__content span:nth-child(2)');
for(var i=0;i<arr.length;i++){
var values = $(arr[i]).html();
$(arr[i]).html(values.split('<span >').join("").split('</span>').join(""));
$(arr[i]).html(values);
}
this.$uTree.filter(val);
}
},
@input事件
highLightText:function(){
setTimeout(function(){
var val = vm.filterText;
if(val !== null && val !== ''){
var arr = $('.el-tree-node .is-focusable .el-tree-node__content span:nth-child(2)');
for(var i=0;i<arr.length;i++){
var values = $(arr[i]).html();
var reg=new RegExp(val,"g"); //创建正则RegExp对象
$(arr[i]).place(reg,'<span >' + val + '</span>'));
}
}
},100);
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。