1  <div id="app">
 2         <el-select v-model="form.Id" placeholder="請選擇" ref="selectTree">
 3             <el-option :key="form.Id" :value="form.Id" :label="form.label" hidden>
 4             </el-option>
 5             <el-tree :data="datalist" :props="defaultProps" @node-click="handleClickNode" node-key="id"></el-tree>
 6
 
         </el-select>
 7     </div>
 8 
 9     <script>
10         //主要內容
11         var app = new Vue({
12             el: "#app",
13             data() {
14                 return {
15                     datalist: [{
16                         Id: 1,
17                         label: '一級 1',
 
18                         children: [{
19                             Id: 11,
20                             label: '二級 1-1',
21                             children: [{
22                                 Id: 111,
23                                 label: '三級 1-1-1'
24                             }]
 
25                         }]
26                     }, {
27                         Id: 2,
28                         label: '一級 2',
29                         children: [{
30                             Id: 21,
31                             label: '二級 2-1',
32                             children: [{
33                                 Id: 211,
34                                 label: '三級 2-1-1'
35                             }]
36                         }, {
37                             Id: 22,
38                             label: '二級 2-2',
39                             children: [{
40                                 Id: 221,
41                                 label: '三級 2-2-1'
42                             }]
43                         }]
44                     }],
45                     defaultProps: {
46                         /** 唯一標識 **/
47                         value: 'Id',
48                         /** 標籤顯示 **/
49                         label: 'label',
50                         /** 子級 **/
51                         children: 'children'
52                     },
53                     /* 注：如果想要展示的data是後端傳來的樹結構，把data改為res賦值物件 */
54                     form: {
55                         Id: "1",
56                         label: "一級 1"
57                     }
58                 }
59             },
60 
61             methods: {
62                 //節點點選事件
63                 handleClickNode(data) {
64                     this.form.Id = data.Id
65                     this.form.label = data.label
66                     // 選擇器執行完成後，使其失去焦點隱藏下拉框的效果
67                     this.$refs.selectTree.blur();
68                     // this.$refs[`${data.id}tree`][index].blur();  // 選擇器執行完成後，使其失去焦點隱藏下拉框的效果
69                 },
70             }
71         });
72     </script>