element-plus使用el-tree组件获取所有选中节点id以及实现实时过滤

在Element Plus中使用el-tree组件获取所有选中节点的ID，可以通过监听check事件来实现。实时过滤树节点，可以使用filter方法或者自定义过滤逻辑。

以下是一个简单的例子：

<template>
  <el-tree
    :data="treeData"
    show-checkbox
    node-key="id"
    :props="defaultProps"
    @check="handleCheck"
  >
  </el-tree>
  <div>
    选中的节点ID: {{ checkedIds }}
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
 
const treeData = ref([
  // 树形结构的数据
]);
 
const defaultProps = {
  children: 'children',
  label: 'label'
};
 
const checkedIds = ref([]);
 
const handleCheck = (checkedKeys, halfCheckedKeys) => {
  checkedIds.value = checkedKeys.map(key => treeData.value.find(node => node.id === key).id);
};
</script>

在这个例子中，handleCheck方法会在每次选中状态改变时被触发，checkedKeys包含了所有选中节点的key值。通过遍历treeData，我们可以找到对应的节点ID，并更新checkedIds数组。

实时过滤功能可以通过外部输入和computed属性结合实现，这里不展开详述，因为问题中没有明确提到这一点。如果需要实时过滤，可以添加输入框并监听其输入事件，然后根据输入内容对treeData进行过滤。