avue组件 ,Tree树型选择框，如何实现过滤筛选后全选

Avue 组件库中的 Tree (树形) 结构通常用于展示层级结构的数据，比如文件系统、组织架构等。在 Avue 的 Tree 控件中实现过滤筛选后全选的功能，一般步骤如下：

1. **初始化 Tree**:
首先，在 Vue 项目中引入 Avue 的 Tree 组件，并配置节点数据和必要的属性。

<template>
  <av-tree :data="treeData" @check-change="handleCheckChange"></av-tree>
</template>

<script>
import { Tree } from 'avue';

export default {
  components: {
    AvTree: Tree,
  },
  data() {
    return {
      treeData: [], // 树形数据数组
    };
  },
  methods: {
    handleCheckChange(node) {
      // 这里会触发当节点状态改变时的回调
    },
  },
};
</script>

2. **设置默认值**:
如果希望所有节点在加载时都被选中，可以给 `treeData` 初始化时添加一个全局的 `default-checked-keys` 属性。

data() {
  return {
    treeData: [
      {
        label: '根节点',
        children: [...], // 子节点数组
        defaultCheckedKeys: ['root'], // 默认全选 root 节点
      },
    ],
  };
}

3. **过滤与筛选**:
在需要筛选时，可以在 `handleCheckChange` 回调中加入过滤逻辑。假设有一个 `filter` 方法接受当前节点和筛选条件作为参数，返回筛选后的节点数组。

methods: {
  handleCheckChange(node, checkedNodes) {
    const filteredNodes = this.filter(node, /* 筛选条件 */);
    
    // 更新已选中的节点
    this.treeData.forEach((item) => {
      item.checkedKeys = filteredNodes.map((n) => n.key); // 仅保留经过筛选的节点
    });
  },
  
  filter(node, condition) {
    // 根据指定的条件，返回符合条件的子节点
    // 返回一个包含符合条件的子节点的新数组
  },
},