Element el-tree el-select 树形下拉框 

 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>

 

posted @ 2022-03-31 17:51  蓝色精灵jah  阅读(1481)  评论(0)    收藏  举报