当前位置：首页 > news >正文

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

news 来源：原创 2025/6/13 12:19:31

效果展示

1.页面编写


<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 = falseexpandedKeys.value  =  proxy.TreeQuery(dataMenu.value, value);
});
</script><template><div  ><div ><a-input-search v-model:value="searchValue"  placeholder="搜索站点" /><a-treev-model:selectedKeys="TreeselectedKeys"class="draggable-tree"draggablev-if="dataMenu && dataMenu.length > 0"block-nodev-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.组件部分

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 封装全局

import { createApp } from 'vue'import TreeQuery from '@/untils/TreeQuery' //这里改成你自己的地址  主要是改这里  其他都是默认自带的let Vue = createApp(App)Vue.config.globalProperties.TreeQuery = TreeQuery.TreeQueryFun  
//主要是改这里  其他都是默认自带的Vue.mount('#app')