1.组件

1. <template>
   
2.   <div class="selection">
   
3.     <el-select placeholder="请选择" v-model="nameList" clearable @clear="handleClear" ref="selectUpResId" style="width: 100%">
   
4.       <el-option hidden :key="1" :value="1"></el-option
   
5.       ><!--这个必不可少否则显示不出来下拉数据-->
   
6.       <!-- check-strictly :父子是否联动，根据业务修改 -->
   
7.       <el-tree
   
8.         :data="options"
   
9.         node-key="id"
   
10.         :props="defaultProps"
    
11.         :default-checked-keys="huixianarr"
    
12.         @check="handleNodeClick"
    
13.         show-checkbox
    
14.         ref="treeRef"
    
15.         :check-strictly="true"
    
16.       >
    
17.       </el-tree>
    
18.     </el-select>
    
19.   </div>
    
20. </template>
    
21. <script setup name="selects">
    
22. import { ref, reactive } from "vue";
    
23. //接受父组件传来的数据
    
24. const props = defineProps({
    
25.   treeFilterData: {
    
26.     type: Array,
    
27.     default: () => [] //树形控件数据源
    
28.   },
    
29.   treeHxlist: {
    
30.     type: Array,
    
31.     default: () => [] //回显ID集合，根据业务修改
    
32.   },
    
33.   dfProps: {
    
34.     type: Object,
    
35.     default: () => {} //树形控件配置项，根据业务修改
    
36.   }
    
37. });
    
38. const treeRef = ref();
    
39. let nameList = ref("");
    
40. let huixianarr = ref([]);
    
41. let idList = ref();
    
42. let options = ref([]);
    
43. let defaultProps = ref({});
    
44. defaultProps.value = props.dfProps;
    
45. let hxlist = ref([]);
    
46. let treeForm = ref();
    
47. let list = ref();
    
48. var propertyName = props.dfProps.label;
    
49. init();
    
50. function init() {
    
51.   options.value = props.treeFilterData;
    
52.   huixianarr.value = props.treeHxlist;
    
53.   let hxlist = findPathsByIds(options.value, huixianarr.value);
    
54.   nameList.value = hxlist.join(","); //显示内容
    
55. }
    
56. const emit = defineEmits(["checKedId"]);
    
57. function handleNodeClick(data, lst) {
    
58.   let arr = [],
    
59.     name = [];
    
60.   lst.checkedNodes.forEach(item => {
    
61.     //过滤拿到选中的id
    
62.     arr.push(item.id);
    
63.   });
    
64.   lst.checkedNodes.forEach(item => {
    
65.     //过滤拿到选中的name
    
66. 
    
67.     name.push(item[propertyName]);
    
68.   });
    
69.   nameList.value = name.join(","); //显示内容
    
70.   idList.value = arr; //后台传参需要的id
    
71.   //传给父组件
    
72. 
    
73.   emit("checKedId", idList.value);
    
74. }
    
75. function handleClear() {
    
76.   hxlist.value = [];
    
77.   idList.value = []; //id集合
    
78.   nameList.value = ""; //input显示内容
    
79.   huixianarr.value = []; //回显ID集合
    
80.   treeRef.value.setCheckedKeys([]); //清空
    
81. }
    
82. function findPathsByIds(data, targetIds) {
    
83.   const resultPaths = []; // 存储匹配的 title
    
84. 
    
85.   // 辅助函数：递归查找单个 id 的 title
    
86.   function findPathRecursive(items, targetId) {
    
87.     for (const item of items) {
    
88.       // 如果当前项的 id 匹配，添加其 title 到结果数组
    
89.       if (item.id === targetId) {
    
90.         resultPaths.push(item[propertyName]);
    
91.         return; // 找到后直接返回
    
92.       }
    
93. 
    
94.       // 如果有 children，递归查找
    
95.       if (item.children && item.children.length > 0) {
    
96.         findPathRecursive(item.children, targetId);
    
97.       }
    
98.     }
    
99.   }
    
100. 
     
101.   // 遍历目标 id 数组，逐一查找
     
102.   for (const id of targetIds) {
     
103.     findPathRecursive(data, id);
     
104.   }
     
105.   return resultPaths;
     
106. }
     
107. </script>
     
108. <style scoped>
     
109. .selection {
     
110.   width: 300px;
     
111. }
     
112. </style>

复制代码

2.使用

1. <Selectoption :treeFilterData="treeFilterData" :treeHxlist="treeHxlist" :dfProps="dfProps" @checKedId="gettreelist" />
   
2. //回显
   
3. const treeFilterData = ref([1]);
   
4. //格式
   
5. let dfProps = ref({
   
6.   children: "children",
   
7.   label: "title"
   
8. });  
   
9. //数据
   
10. const treeFilterData = ref([
    
11.     {
    
12.       "id": 1,
    
13.       "path": "/home/index",
    
14.       "name": "home",
    
15.       "component": "/home/index",
    
16.       "title": "首页",
    
17.       "meta": {
    
18.         "icon": "HomeFilled",
    
19.         "title": "首页",
    
20.         "isLink": "",
    
21.         "isHide": false,
    
22.         "isFull": false,
    
23.         "isAffix": true,
    
24.         "isKeepAlive": true
    
25.       }
    
26.     },
    
27.     {
    
28.       "id": 6,
    
29.       "path": "/system",
    
30.       "name": "system",
    
31.       "redirect": "/system/accountManage",
    
32.       "title": "系统管理",
    
33.       "meta": {
    
34.         "icon": "Tools",
    
35.         "title": "系统管理",
    
36.         "isLink": "",
    
37.         "isHide": false,
    
38.         "isFull": false,
    
39.         "isAffix": false,
    
40.         "isKeepAlive": true
    
41.       },
    
42.       "children": [
    
43.         {
    
44.           "id": 61,
    
45.           "father": 6,
    
46.           "path": "/system/accountManage",
    
47.           "name": "accountManage",
    
48.           "component": "/system/accountManage/index",
    
49. 
    
50.           "title": "账号管理",
    
51.           "meta": {
    
52.             "icon": "Menu",
    
53.             "title": "账号管理",
    
54.             "isLink": "",
    
55.             "isHide": false,
    
56.             "isFull": false,
    
57.             "isAffix": false,
    
58.             "isKeepAlive": true
    
59.           }
    
60.         },
    
61.         
    
62.         
    
63.       ]
    
64.     }
    
65.   ]);

复制代码

到此这篇关于Vue3+elementPlus中 树形控件封装的实现的文章就介绍到这了,更多相关Vue3 elementPlus树形控件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/javascript/339590gc1.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！