vue3+elementplus 树节点过滤功能实现

  <marsDialog left="10" top="50" width="370">
    <p>数据管理</p>
    <div>
      <el-input v-model="filterText" style="width: 240px" placeholder="模糊搜索" @input="inputHanlder" />
      <!-- filter-node-method对树节点进行筛选时执行的方法， 返回 false 则表示这个节点会被隐藏 -->
      <el-scrollbar class="scroll-container">
        <div class="scroll-content">
          <el-tree ref="treeRef" style="max-width: 600px" class="filter-tree" :data="_data" :props="defaultProps"
            default-expand-all :filter-node-method="filterNode" @node-click="nodeClick" />
        </div>
      </el-scrollbar>
    </div>
  </marsDialog>

interface Tree {
  [key: string]: any
}
const inputHanlder = (_v: any) => {
  // console.log(jdJson.features);
}
const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>();
const defaultProps = {
  children: 'children',
  label: 'label',
}
let _allData = reactive({ data: [] });
let _data = ref([])
fetch('xxxxxxx', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzeXNfaWQiOjEsInVpZCI6ImFlMjllODkzODhlMzkyMjljNGE0ZDJkY2U4MTQyZWU4IiwibmFtZSI6ImFkbWluIiwicGFzc3dvcmQiOiIiLCJyZWdpc3RlcnRpbWUiOiIyMDIzLzQvMjcgMTc6MjE6MzEiLCJuaWNrbmFtZSI6ImFkbWluIiwiZW1haWwiOiIyNTU4NkB3ZWxsY2h5Lm5ldCIsInBpYyI6IiIsImlhdCI6MTcxNDk4MjczMywiZXhwIjoxNzE1MDY5MTMzfQ.K-NKPvKCWWLlU2nZ1-dmhkhJI7aDxDtEDcbZUrOcOB0'
  }
}).then(response => response.json())
  .then(data => {
    _allData.data.length = 0;
    _allData.data.push(...data.message);
    // 在数据填充后调用mapTreeData函数
    let treeData = [
      {
        id: 1,
        label: '金牛区',
        children: mapTreeData(jdJson, _allData.data)
      },
    ];
    _data.value = treeData
  })
  .catch(error => console.log(error));
const mapTreeData = (data: any, allData: any[]): Tree[] => {
  return data.features.map((feature: any, index: number) => {
    const districts = allData.filter((district) => feature.properties.Name === district.streetOffice);
    const children = districts.map((district) => ({ label: district.name, position: [[district.longitude, district.latitude,500]] }));
    return {
      id: index + 2,
      label: feature.properties.Name,
      position: feature.geometry.coordinates,
      children: children || []
    };
  });
};

// 监听输入框内容的变化，以便执行筛选操作
watch(filterText, (val) => {
  // 调用 el-tree 组件的 filter 方法，根据输入的值来筛选节点
  treeRef.value!.filter(val)
})
// 自定义筛选方法，用于决定树节点是否应该在筛选结果中显示
const filterNode = (value: string, data: Tree, node: any) => {
  // 打印筛选值和节点数据，用于调试
  console.log(value); //打印的是筛选操作中用户输入的值。在这段代码中，value 是传递给 filterNode 方法的第一个参数，表示用户输入的筛选值。
  console.log(data); //打印的是当前树节点的数据。在这段代码中，data 是传递给 filterNode 方法的第二个参数，表示当前被筛选的节点的数据，包括标签等信息。
  /**
   * 这行代码是用来处理当用户没有输入筛选值时的情况。
    在树形组件中，如果用户没有输入任何筛选值，那么我们希望所有的节点都能够显示，
    而不应该进行任何筛选操作。因此，当用户没有输入筛选值时，我们直接返回 true，表示当前节点应该被显示在筛选结果中。
   */
  if (!value) return true
  // 如果节点的标签包含筛选值，则返回 true，表示节点应该显示
  // return data.label.includes(value)
  if (data.label) {
    return chooseNode(value, data, node);
  }
}
// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
const chooseNode = (value: string, data: Tree, node: { level: any; parent: any; }) => {
  if (data.label.indexOf(value) !== -1) {
    return true
  }
  const level = node.level
  // 如果传入的节点本身就是一级节点就不用校验了
  if (level === 1) {
    return false
  }
  // 先取当前节点的父节点
  let parentData = node.parent
  // 遍历当前节点的父节点
  let index = 0
  while (index < level - 1) {
    // 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
    if (parentData.data.label.indexOf(value) !== -1) {
      return true
    }
    // 否则的话再往上一层做匹配
    parentData = parentData.parent
    index++
  }
  // 没匹配到返回false
  return false
}
let lastStreetPosition: number | null = null;
const nodeClick = (obj: any) => {
  if (obj.label.includes('街道')) {
    mapWork.jinNiuJieDaoWall(obj.position[0]);
    window.map.flyToPositions(obj.position[0], {
      radius: 400,
    });
    lastStreetPosition = obj.position[0]; // 更新上一次包含街道的位置
  } else {
    mapWork.jinNiuJieDaoWall(lastStreetPosition);
    window.map.flyToPoint(obj.position[0], {
      radius: 300,
    });
  }
}