vue3 +element plus el-tree搜索功能和父组件调用子组件方法

// 父组件：
<leftTree ref="childTree" :data="departmentData" @clickNode="clickNode"></leftTree>

// 父组件js

const childTree = ref(null);
const checkedNodes = childTree.value.getCheckedNodes(); // 父组件调用子组件方法

// 子组件：  

<el-input clearable v-model="filterText" style="width: 95%" placeholder="请输入关键字" />
 <el-tree
      ref="treeRef"
      class="filter-tree"
      :data="data"
      :props="defaultProps"
      default-expand-all
      :filter-node-method="filterNode"
      @node-click="clickNode"
    />

// 子组件js：  

const treeRef = ref(null)
const getCheckedNodes = ()=>{
  if (treeRef.value) {
    return treeRef.value.getCheckedNodes();  // 获取tree选中节点
  }
  return [];
}

暴露出方法：defineExpose({ getCheckedNodes });

// 搜索框tree

const filterText = ref('')
const defaultProps = {
  children: 'children',
  label: 'name'
}
watch(filterText, (val) => {
  treeRef.value.filter(val)
})
const filterNode = (value, data) => { 
  if (!value) return true
  return data.name.includes(value)
}