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

 <div id="app">
        <el-select v-model="form.Id" placeholder="請選擇" ref="selectTree">
            <el-option :key="form.Id" :value="form.Id" :label="form.label" hidden>
            </el-option>
            <el-tree :data="datalist" :props="defaultProps" @node-click="handleClickNode" node-key="id"></el-tree>
        </el-select>
    </div>

    <script>
        //主要內容
        var app = new Vue({
            el: "#app",
            data() {
                return {
                    datalist: [{
                        Id: 1,
                        label: '一級 1',
                        children: [{
                            Id: 11,
                            label: '二級 1-1',
                            children: [{
                                Id: 111,
                                label: '三級 1-1-1'
                            }]
                        }]
                    }, {
                        Id: 2,
                        label: '一級 2',
                        children: [{
                            Id: 21,
                            label: '二級 2-1',
                            children: [{
                                Id: 211,
                                label: '三級 2-1-1'
                            }]
                        }, {
                            Id: 22,
                            label: '二級 2-2',
                            children: [{
                                Id: 221,
                                label: '三級 2-2-1'
                            }]
                        }]
                    }],
                    defaultProps: {
                        /** 唯一標識 **/
                        value: 'Id',
                        /** 標簽顯示 **/
                        label: 'label',
                        /** 子級 **/
                        children: 'children'
                    },
                    /* 注：如果想要展示的data是后端傳來的樹結構，把data改為res賦值對象 */
                    form: {
                        Id: "1",
                        label: "一級 1"
                    }
                }
            },

            methods: {
                //節點點擊事件
                handleClickNode(data) {
                    this.form.Id = data.Id
                    this.form.label = data.label
                    // 選擇器執行完成后，使其失去焦點隱藏下拉框的效果
                    this.$refs.selectTree.blur();
                    // this.$refs[`${data.id}tree`][index].blur();  // 選擇器執行完成后，使其失去焦點隱藏下拉框的效果
                },
            }
        });
    </script>