elementui下拉树

1.效果图

2.下拉树组件

<template>
    <el-select ref="selectAppType" size="small" placeholder="请选择" v-model="selectValue" :disabled="viewVisible">
        <el-option class="option-style" label="gnwzmc" value="gnwzbm">
            <el-tree :data="innerTreeData" :props="treeProps" @node-click="nodeClick" :filter-node-method="filterNode"
                class="filter-tree"></el-tree>
        </el-option>
    </el-select>
</template>
<script>
    import {
        findTreeList
    } from '@/api/fault/faultApi'

    export default {
        name: "test",
        components: {},
        props: {
            selectValue: "",
            treeData: {
                type: Array,
                default: function () {
                    return []
                }
            },
            viewVisible: Boolean,
            type: String,
            treeProps: {
                type: Object,
                default: function () {
                    return {
                        value: 'gnwzbm',
                        label: 'gnwzmc',
                        children: 'children',
                        disabled: function (data, node) {
                            return data
                        }
                    }
                }
            },
        },
        data() {
            return {
                innerTreeData: [],
                tree: []

            };
        },
        // mounted() {
        //   scroll(0,0)
        // },
        created() {
            scroll(0, 0)
            this.initTree()
        },
        methods: {
            initTree() {
                if (this.selectValue) {
                    this.innerTreeData = JSON.parse(sessionStorage.getItem('sydd'))
                    console.log('77777777777' + this.innerTreeData);
                    for (let i = 0; i < this.innerTreeData.length; i++) {
                        if (this.selectValue == this.innerTreeData[i].code) {
                            this.handleNodeClick(this.innerTreeData[i])
                        } else {
                            for (let j = 0; j < this.innerTreeData[i].children.length; j++) {
                                if (this.selectValue == this.innerTreeData[i].children[j].code) {
                                    this.handleNodeClick(this.innerTreeData[i].children[j])
                                }

                            }
                        }

                    }
                } else {
                    findTreeList({}).then((res) => {
                        if (res.success) {
                            this.innerTreeData = res.data
                            sessionStorage.setItem('sydd', JSON.stringify(res.data))
                        }
                    })
                }
                // var node = '';
                // var async = false;
                // findTreeList(node,async,'1').then((res) => {
                //   if (res.success) {
                //     this.innerTreeData = res.result
                //   }
                // })
            },
            //tree过滤
            filterNode(value, data) {
                if (!value) return true;
                return data.name.indexOf(value) !== -1;
            },
            nodeClick(obj) {
                this.$refs.selectAppType.blur();
                this.$emit("handleClick", obj)
            }
        }
    };
</script>

<style lang="scss" scoped>
    .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
        height: auto;
        max-height: 274px;
        padding: 0;
        overflow: hidden;
        overflow-y: auto;

    }

    .el-select-dropdown__item.selected {
        font-weight: normal;
    }

    ul li>>>.el-tree .el-tree-node__content {
        height: auto;
        padding: 0 20px;
    }

    .el-tree-node__label {
        font-weight: normal;
    }

    .el-tree>>>.is-current .el-tree-node__label {
        color: #409EFF;
        font-weight: 700;
    }

    .el-tree>>>.is-current .el-tree-node__children .el-tree-node__label {
        color: #606266;
        font-weight: normal;
    }
</style>

3.使用