el-tree使用filter-node-method实现过滤

el-tree使用filter-node-method实现过滤：

实现效果：

---

代码实现：

html部分

<el-input style="width:95%" 
	v-model="ruleData.keyWord" @input="$forceUpdate()" 
	:placeholder="$t('warning.Please_enter_the_device_location')" 
	suffix-icon="el-icon-search">
</el-input>

<el-tree style="padding:15px 0"
	ref="treeDom"
	:filter-node-method="filterNode"
	:data="ruleData.data"
	:props="ruleData.defaultProps"
	node-key="id"
	check-on-click-node
	:expand-on-click-node="false"
	:current-node-key="ruleData.currentKey"
	:highlight-current="true"
	:default-expand-all="true"
	@node-click="handleNodeClick">
</el-tree>

data()定义部分

data(){
	return {
		ruleData:{
		    data:[],
		    currentKey:-1,
		    keyWord:"",
		    defaultProps: {
		        children: 'children',
		        label: 'locationName',
		        value:"id"
		    },
		},
	}
}

watch监听输入框文本

watch:{
      'ruleData.keyWord':function(val){
            val = val.replace(/(^\s*)|(\s*$)/g, "");
            this.$refs.treeDom.filter(val);
        }
  },

methods中定义树节点过滤函数fliterNode

filterNode(value, data) {
    if (!value) return true;
    
    return data.locationName.indexOf(value) !== -1;
},