elementUI树形控件，如何选中

我想实现的效果如图，点击左上角的输入框，出现一个对话框树形控件，当选择“费控子页面2”的时候，他能显示在左上角的框中。

img


现在的问题就是选不到，在网上查了好多方法都不合适，应该怎么处理呢，谢谢！


```hrml
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="../static/css/element.css">
    <script src="../static/js/vue.js"></script>
    <script src="../static/js/element.js"></script>
    <script src="../static/js/wangEditor.min.js"></script>
    <script src="../static/js/jquery-3.1.1.min.js"></script>
    <style >
        @import url("//unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css");
    </style>
    <style>
        .el-icon-remove-outline{
            font-size: 20px;
            color: gray;
        }

        .el-dialog{
            width: 3090px;
        }
    </style>

</head>

<body>

<div id="app">
    <el-button type="text" @click="dialogFormVisible = true">
        <el-input v-model="input" placeholder="请选择知识类型"></el-input>
    </el-button>
    <el-dialog title="知识类别" :visible.sync="dialogFormVisible" width="30%">
        <div id="app1">
            <el-tree icon-class="el-icon-remove-outline"
                     ref="tree"
                     class="common-tree"
                     :style="style"
                     :data="data"
                     :props="defaultProps"
                     :show-checkbox="multiple"
                     :node-key="nodeKey"
                     :check-strictly="checkStrictly"
                     default-expand-all
                     :expand-on-click-node="false"
                     :check-on-click-node="multiple"
                     :highlight-current="true"
                     @node-click="handleNodeClick"
                     @check-change="handleCheckChange"
            >
            </el-tree>
        </div>
    </el-dialog>
</div>
</body>

<script type="module">
    var Main = {
        data() {
            return {
                dialogTableVisible: false,
                dialogFormVisible: false,
                // formLabelWidth: '20px',
                data: [{
                    id: 1,
                    label: 'SAP',
                    children: [{
                        id: 4,
                        label: '费控',
                        children: [{
                            id: 9,
                            label: '费控子页面1'
                        }, {
                            id: 10,
                            label: '费控子页面2'
                        }]
                    }]
                }, {
                    id: 2,
                    label: '非SAP',
                    children: [{
                        id: 5,
                        label: 'aaa'
                    }, {
                        id: 6,
                        label: 'bbb'
                    }]
                }],
                defaultProps: {
                    children: 'children',
                    label: 'label',
                }

            };
        },
        methods:{
            checkSelectedNode(checkedKeys) {
                var item = checkedKeys[0]
                this.$refs.tree.setCurrentKey(item)
                var node = this.$refs.tree.getNode(item)
                this.setSelectOption(node)
            }


        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

    new Vue().$mount('#app1')

</script>
</html>

```

img

img

img

img


你这些方法、变量，在下面都有定义吗？
出现问题得一步步找到解决方法，循序渐进。
建议参考一下官方文档
https://element.eleme.cn/#/zh-CN/component/tree，单独使用这个tree，点击事件你能否获取到数据？如果能获取到，再进行下一步