vue3 + ant 实现 tree默认展开，筛选对应数据打开，简单~直接cv

效果展示

1.页面编写

javascript 复制代码

<script setup >
import {getCurrentInstance, ref, watch} from 'vue'

const {proxy} = (getCurrentInstance())
const expandedKeys = ref()
const TreeselectedKeys = ref('')
const autoExpandParent = ref(true);
const searchValue = ref('')
const fieldNames = {
  children: 'children',
  title: 'regionName',
  key:'regionCode'
};
const onExpand = keys => {
  expandedKeys.value = keys;
  autoExpandParent.value = true;
};

const dataMenu = ref([
  {
    "regionCode": "110000",
    "regionName": "北京市",
    "children": [
      {
        "regionCode": "110101",
        "regionName": "东城区",
        "children": [],
        "childrens": [],
        "check": false
      },
      {
        "regionCode": "110102",
        "regionName": "西城区",
        "children": [],
        "childrens": [],
        "check": false
      },
      {
        "regionCode": "110105",
        "regionName": "朝阳区",
        "children": [],
        "childrens": [],
        "check": false
      }
    ],
    "childrens": [],
    "check": false
  },
  {
    "regionCode": "120000",
    "regionName": "天津市",
    "children": [
      {
        "regionCode": "120101",
        "regionName": "和平区",
        "children": [],
        "childrens": [],
        "check": false
      },
      {
        "regionCode": "120102",
        "regionName": "河东区",
        "children": [],
        "childrens": [],
        "check": false
      },
      {
        "regionCode": "120103",
        "regionName": "河西区",
        "children": [],
        "childrens": [],
        "check": false
      }
    ],
    "childrens": [],
    "check": false
  },
  {
    "regionCode": "130000",
    "regionName": "河北省",
    "children": [
      {
        "regionCode": "130100",
        "regionName": "石家庄市",
        "children": [],
        "childrens": [],
        "check": false
      },
      {
        "regionCode": "130200",
        "regionName": "唐山市",
        "children": [],
        "childrens": [],
        "check": false
      },
      {
        "regionCode": "130300",
        "regionName": "秦皇岛市",
        "children": [],
        "childrens": [],
        "check": false
      }
    ],
    "childrens": [],
    "check": false
  },
  {
    "regionCode": "140000",
    "regionName": "山西省",
    "children": [
      {
        "regionCode": "140100",
        "regionName": "太原市",
        "children": [],
        "childrens": [],
        "check": false
      },
      {
        "regionCode": "140200",
        "regionName": "大同市",
        "children": [],
        "childrens": [],
        "check": false
      },
      {
        "regionCode": "140300",
        "regionName": "阳泉市",
        "children": [],
        "childrens": [],
        "check": false
      },
      {
        "regionCode": "140400",
        "regionName": "长治市",
        "children": [],
        "childrens": [],
        "check": false
      }
    ],
    "childrens": [],
    "check": false
  },
  {
    "regionCode": "150000",
    "regionName": "内蒙古自治区",
    "children": [
      {
        "regionCode": "150100",
        "regionName": "呼和浩特市",
        "children": [],
        "childrens": [],
        "check": false
      },
      {
        "regionCode": "150200",
        "regionName": "包头市",
        "children": [],
        "childrens": [],
        "check": false
      },
      {
        "regionCode": "150300",
        "regionName": "乌海市",
        "children": [],
        "childrens": [],
        "check": false
      },
      {
        "regionCode": "150400",
        "regionName": "赤峰市",
        "children": [],
        "childrens": [],
        "check": false
      }
    ],
    "childrens": [],
    "check": false
  },
  {
    "regionCode": "210000",
    "regionName": "辽宁省",
    "children": [
      {
        "regionCode": "210100",
        "regionName": "沈阳市",
        "children": [],
        "childrens": [],
        "check": false
      },
      {
        "regionCode": "210200",
        "regionName": "大连市",
        "children": [],
        "childrens": [],
        "check": false
      },
      {
        "regionCode": "210300",
        "regionName": "鞍山市",
        "children": [],
        "childrens": [],
        "check": false
      },
      {
        "regionCode": "210400",
        "regionName": "抚顺市",
        "children": [],
        "childrens": [],
        "check": false
      }
    ],
    "childrens": [],
    "check": false
  },
  {
    "regionCode": "220000",
    "regionName": "吉林省",
    "children": [
      {
        "regionCode": "220100",
        "regionName": "长春市",
        "children": [],
        "childrens": [],
        "check": false
      },
      {
        "regionCode": "220200",
        "regionName": "吉林市",
        "children": [],
        "childrens": [],
        "check": false
      },
      {
        "regionCode": "220300",
        "regionName": "四平市",
        "children": [],
        "childrens": [],
        "check": false
      },
      {
        "regionCode": "220400",
        "regionName": "辽源市",
        "children": [],
        "childrens": [],
        "check": false
      }
    ],
    "childrens": [],
    "check": false
  },
  {
    "regionCode": "230000",
    "regionName": "黑龙江省",
    "children": [
      {
        "regionCode": "230100",
        "regionName": "哈尔滨市",
        "children": [],
        "childrens": [],
        "check": false
      },
      {
        "regionCode": "230200",
        "regionName": "齐齐哈尔市",
        "children": [],
        "childrens": [],
        "check": false
      }
    ],
    "childrens": [],
    "check": false
  },
  {
    "regionCode": "310000",
    "regionName": "上海市",
    "children": [
      {
        "regionCode": "310101",
        "regionName": "黄浦区",
        "children": [],
        "childrens": [],
        "check": false
      },
      {
        "regionCode": "310104",
        "regionName": "徐汇区",
        "children": [],
        "childrens": [],
        "check": false
      },
      {
        "regionCode": "310105",
        "regionName": "长宁区",
        "children": [],
        "childrens": [],
        "check": false
      }
    ],
    "childrens": [],
    "check": false
  }
])
watch(()=>searchValue.value, value => {
  autoExpandParent.value = false
  expandedKeys.value  =  proxy.TreeQuery(dataMenu.value, value);
});
</script>

<template>
  <div  >
      <div >
        <a-input-search v-model:value="searchValue"  placeholder="搜索站点" />

        <a-tree
            v-model:selectedKeys="TreeselectedKeys"
            class="draggable-tree"
            draggable
            v-if="dataMenu && dataMenu.length > 0"
            block-node
            v-bind="autoExpandParent == true ? {}: { expandedKeys } "
            :default-expand-all="autoExpandParent"
            ref="tree"
            height="50vh"
            @expand="onExpand"
            :tree-data="dataMenu"
            :field-names="fieldNames">
          <template #title="{ regionName }">
                   <span v-if="regionName.indexOf(searchValue) > -1">
                     {{ regionName.substring(0, regionName.indexOf(searchValue)) }}
                     <span style="color: #f50">{{ searchValue }}</span>
                     {{ regionName.substring(regionName.indexOf(searchValue) + searchValue.length) }}
                   </span>
            <span v-else>{{ regionName }}</span>
          </template>
        </a-tree>
        </div>
  </div>
</template>

2.组件部分

javascript 复制代码

function findRegionCodes(data, name,regionCode,regionName) {
    const result = [];

    // 递归函数：检查区域并收集代码
    function checkRegion(region, parentCodes = []) {
        // 检查当前区域名称是否包含目标名称
        if (region[regionName] && region[regionName].includes(name)) {
            // 构建当前区域及其所有上级区域的代码
            const allCodes = [...parentCodes, region[regionCode]];
            result.push({
                regionName: region[regionName],
                regionCodes: allCodes
            });
        }

        // 递归检查子区域
        if (region.children && region.children.length > 0) {
            region.children.forEach(child => {
                checkRegion(child, [...parentCodes, region[regionCode]]);
            });
        }
    }

    // 开始检查顶级区域
    data.forEach(region => {
        checkRegion(region);
    });

    return result;
}

function extractAndDeduplicateCodes(data) {
    // 1. 提取所有regionCodes并合并成一个数组
    const allCodes = data.reduce((acc, item) => {
        return acc.concat(item.regionCodes);
    }, []);

    // 2. 数组去重（使用Set数据结构）
    const uniqueCodes = [...new Set(allCodes)];
    return uniqueCodes;
}
function TreeQueryFun(data,name,regionCode = 'regionCode',regionName = 'regionName'){
    let results = findRegionCodes(data,name,regionCode,regionName)
    let result = extractAndDeduplicateCodes(results)
    return result
}
export default {
    TreeQueryFun
}

// 使用
// data : 数据
// name :当前输入名字
// regionCode : 查询code 默认为 regionCode
// regionName : 查询name 默认为 regionName


// 1.input 定义
// <a-input-search v-model:value="searchValue" style="margin-bottom: 8px;margin:1vh;width: 95%" placeholder="搜索站点" />

// 2.树形结构
// 代码上面有这里就不写了

// 重点  v-bind="autoExpandParent == true ? {}: { expandedKeys } "  :default-expand-all="autoExpandParent"


// 3.监听内容发生变化
// watch(()=>searchValue.value, value => {
//     autoExpandParent.value = false
//     expandedKeys.value  =  proxy.TreeQuery(dataMenu.value, value);
// });

3.main.js 封装全局

javascript 复制代码

import { createApp } from 'vue'

import TreeQuery from '@/untils/TreeQuery' 
 //这里改成你自己的地址  主要是改这里  其他都是默认自带的

let Vue = createApp(App)

Vue.config.globalProperties.TreeQuery = TreeQuery.TreeQueryFun  
//主要是改这里  其他都是默认自带的

Vue.mount('#app')