SmartCommunity/operationSupport/src/views/flow/communityTree.vue

<template>
    <div class="organ-tree">
        <el-input v-model="filterText" placeholder="请输入关键字" suffix-icon="el-icon-search"></el-input>
        <div class="tree-style-box no-scrollbar">
            <el-tree
                class="tree-style"
                :data="organList"
                ref="tree"
                node-key="id"
                :highlight-current="true"
                :props="defaultProps"
                :expand-on-click-node="false"
                @node-click="treeClick"
                default-expand-all
                :filter-node-method="filterNode"
            >
            </el-tree>
        </div>
    </div>
</template>

<script>
export default {
    name: 'organTree',
    data() {
        return {
            filterText: '',
            organList: [],
            defaultProps: {
                label: 'communityName'
            }
        };
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    methods: {
        getOrgTreeList() {
            this.$http.get('/sc-community-web/assets/community/list').then(({ status, data, msg }) => {
                if (status === 0 && data) {
                    this.organList = data;
                    this.$nextTick().then(() => {
                        const firstNode = document.querySelector('.el-tree-node');
                        firstNode.click();
                    });
                }
            });
        },

        filterNode(value, data) {
            if (!value) return true;
            return data.communityName.indexOf(value) !== -1;
        },
        treeClick(e) {
            this.$emit('organId', e.id);
        }
    },
    created() {
        this.getOrgTreeList();
    }
};
</script>

<style lang="scss" scoped>
.organ-tree {
    width: 260px;
    background: #ffffff;
    padding: 20px;
    box-sizing: border-box;
    float: left;
    height: 100%;
    overflow: auto;
    &::before {
        clear: both;
    }
    .tree-style-box {
        margin-top: 20px;
        max-height: calc(100vh - 200px);
        overflow: scroll;
    }
}
</style>