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>
