element-ui ＜el-input＞ +＜el-tree＞使用

<template>
    <!-- 需求:通过点击<el-input> 将<el-tree>树型结构打开，选中<el-tree>某个值显示在<el-input>里面(中文)，点击搜索将<el-input>的值传给后台，后台需要中文对应的id;前端显示中文，后台传入Number -->
    <div class="demo">
        <el-input placeholder="前端显示中文" v-model="demoString" value-key=demoNumber @click.native="getTree"></el-input>
        <el-tree :data="data" :props="defaultProps" node-key=id @node-click="handleNodeClick" v-show="closeTree" default-expand-all></el-tree>
    </div>
</template>
<script>
    export default {
    
    
        name: 'demo',
        data() {
    
    
            return {
    
    
                demoString: '',
                closeTree: false,
                data: [{
    
    
                    id: 1,
                    label: '一级 1',
                    children: [{
    
    
                        id: 2,
                        label: '二级 1-1',
                        children: [{
    
    
                            id: 3,
                            label: '三级 1-1-1'
                        }]
                    }]
                }, {
    
    
                    id: 4,
                    label: '一级 2',
                    children: [{
    
    
                        id: 5,
                        label: '二级 2-1',
                        children: [{
    
    
                            id: 6,
                            label: '三级 2-1-1'
                        }]
                    }, {
    
    
                        id: 7,
                        label: '二级 2-2',
                        children: [{
    
    
                            id: 8,
                            label: '三级 2-2-1'
                        }]
                    }]
                }, {
    
    
                    id: 9,
                    label: '一级 3',
                    children: [{
    
    
                        id: 10,
                        label: '二级 3-1',
                        children: [{
    
    
                            id: 11,
                            label: '三级 3-1-1'
                        }]
                    }, {
    
    
                        id: 12,
                        label: '二级 3-2',
                        children: [{
    
    
                            id: 13,
                            label: '三级 3-2-1'
                        }]
                    }]
                }],
                defaultProps: {
    
    
                    children: 'children',
                    label: 'label'
                }
            }
        },
        created() {
    
    

        },
        methods: {
    
    
            // 点击 树状里面当前那个
            handleNodeClick(data) {
    
    
                this.demoString = data.label; // 前端显示中文
                this.demoNumber = data.id; // 传后台值为对应 id
                this.closeTree = !this.closeTree;
            },
            // 点击 input 打开 树状，
            getTree() {
    
    
                this.closeTree = !this.closeTree;
            },
        },
    };

</script>
<style scoped>

</style>