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

树节点所展示的街道是读取的成都市金牛区的范围边界线的json文件,街道下对应内容市通过fetch调用接口获取的内容,通过mapTreeData函数循环遍历,对数据进行处理,最后返回树节点所需要展示的格式,然后elemenplus封装好的树节点过滤方法进行过滤,因为elemenplus封装好的树节点过滤对匹配对应的父节点后不会展示下面的子节点内容,所以用chooseNode方法,如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符

  <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,
    });
  }
}