1.組件

<template><div class="selection"><el-select placeholder="請選擇" v-model="nameList" clearable @clear="handleClear" ref="selectUpResId" style="width: 100%"><el-option hidden :key="1" :value="1"></el-option><!--這個必不可少否則顯示不出來下拉數據--><!-- check-strictly :父子是否聯動，根據業務修改 --><el-tree:data="options"node-key="id":props="defaultProps":default-checked-keys="huixianarr"@check="handleNodeClick"show-checkboxref="treeRef":check-strictly="true"></el-tree></el-select></div>
</template>
<script setup name="selects">
import { ref, reactive } from "vue";
//接受父組件傳來的數據
const props = defineProps({treeFilterData: {type: Array,default: () => [] //樹形控件數據源},treeHxlist: {type: Array,default: () => [] //回顯ID集合，根據業務修改},dfProps: {type: Object,default: () => {} //樹形控件配置項，根據業務修改}
});
const treeRef = ref();
let nameList = ref("");
let huixianarr = ref([]);
let idList = ref();
let options = ref([]);
let defaultProps = ref({});
defaultProps.value = props.dfProps;
let hxlist = ref([]);
let treeForm = ref();
let list = ref();
var propertyName = props.dfProps.label;
init();
function init() {options.value = props.treeFilterData;huixianarr.value = props.treeHxlist;let hxlist = findPathsByIds(options.value, huixianarr.value);nameList.value = hxlist.join(","); //顯示內容
}
const emit = defineEmits(["checKedId"]);
function handleNodeClick(data, lst) {let arr = [],name = [];lst.checkedNodes.forEach(item => {//過濾拿到選中的idarr.push(item.id);});lst.checkedNodes.forEach(item => {//過濾拿到選中的namename.push(item[propertyName]);});nameList.value = name.join(","); //顯示內容idList.value = arr; //后臺傳參需要的id//傳給父組件emit("checKedId", idList.value);
}
function handleClear() {hxlist.value = [];idList.value = []; //id集合nameList.value = ""; //input顯示內容huixianarr.value = []; //回顯ID集合treeRef.value.setCheckedKeys([]); //清空
}
function findPathsByIds(data, targetIds) {const resultPaths = []; // 存儲匹配的 title// 輔助函數：遞歸查找單個 id 的 titlefunction findPathRecursive(items, targetId) {for (const item of items) {// 如果當前項的 id 匹配，添加其 title 到結果數組if (item.id === targetId) {resultPaths.push(item[propertyName]);return; // 找到后直接返回}// 如果有 children，遞歸查找if (item.children && item.children.length > 0) {findPathRecursive(item.children, targetId);}}}// 遍歷目標 id 數組，逐一查找for (const id of targetIds) {findPathRecursive(data, id);}return resultPaths;
}
</script>
<style scoped>
.selection {width: 300px;
}
</style>

2.使用

 <Selectoption :treeFilterData="treeFilterData" :treeHxlist="treeHxlist" :dfProps="dfProps" @checKedId="gettreelist" />
//回顯
const treeFilterData = ref([1]); 
//格式
let dfProps = ref({children: "children",label: "title"
});  
//數據
const treeFilterData = ref([{"id": 1,"path": "/home/index","name": "home","component": "/home/index","title": "首頁","meta": {"icon": "HomeFilled","title": "首頁","isLink": "","isHide": false,"isFull": false,"isAffix": true,"isKeepAlive": true}},{"id": 6,"path": "/system","name": "system","redirect": "/system/accountManage","title": "系統管理","meta": {"icon": "Tools","title": "系統管理","isLink": "","isHide": false,"isFull": false,"isAffix": false,"isKeepAlive": true},"children": [{"id": 61,"father": 6,"path": "/system/accountManage","name": "accountManage","component": "/system/accountManage/index","title": "賬號管理","meta": {"icon": "Menu","title": "賬號管理","isLink": "","isHide": false,"isFull": false,"isAffix": false,"isKeepAlive": true}},]}]);