elementUI el-tree组件的filter报错Error in callback for watcher “xxx“: “TypeError: x is not a function

先上报错截图
因为百度没有人遇到这个问题,所以自己记录一下
elementUI el-tree组件的filter报错Error in callback for watcher “xxx“: “TypeError: x is not a function_第1张图片

自己写的:

<el-input size="mini" v-model="searchOrg">el-input>
<el-tree
  accordion
  :filter-node-method="filterNode"
  ref="tree"
  :data="firstSelectData"
  @node-click="handleNodeClick"
>
  <span slot-scope="{node, data}">
     <span class="tree-node-label">
        <i class="el-icon-office-building">i>
        <span>{{node.label}}span>
     span>
  span>
el-tree>
data(){
	return {
		searchOrg:''
	}
}
watch: {
    searchOrg(val) {
      this.$refs.tree.filter(val)
    }
  },
methods:{
	filterNode(value, data) {
      if(!value) return data;
      return data.label.indexOf(value) !== -1;
    },
}

官方:
elementUI el-tree组件的filter报错Error in callback for watcher “xxx“: “TypeError: x is not a function_第2张图片
实在不知道问题出在哪,就把ref输出了一下,发现了问题所在
我的ref el-tree打印出来是

watch: {
    searchOrg(val) {
      console.log(this.$refs.tree)
      this.$refs.tree.filter(val)
    }
  },

在这里插入图片描述
正常的输出应该是:
elementUI el-tree组件的filter报错Error in callback for watcher “xxx“: “TypeError: x is not a function_第3张图片
我们再输出一下它的filter方法
我自己的:
elementUI el-tree组件的filter报错Error in callback for watcher “xxx“: “TypeError: x is not a function_第4张图片
正确的应该是
elementUI el-tree组件的filter报错Error in callback for watcher “xxx“: “TypeError: x is not a function_第5张图片

有没有发现问题所在?
对,就是组件变成了数组型,我们需要的el-tree元素应该是0号位,可能因为我自己又封装了一个穿梭框组件导致的吧
解决办法:

this.$refs.tree.filter(val)

变为

this.$refs.tree[0].filter(val)

解决,el-tree 的过滤功能就可以正常使用了

你可能感兴趣的:(UI库组件,elementui,el-tree,filter,not,a,function)