SmartCommunity/operationSupport/src/components/common/organTree.vue

<template>
    <div class="organ-tree">
        <el-input v-model="filterText" placeholder="请输入机构名称"><i slot="suffix" class="el-icon-search"></i></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: {
                children: 'children',
                label: 'name'
            }
        };
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    methods: {
        getOrgTreeList() {
            this.$http.get('/assets/tree/community/find').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.orgName.indexOf(value) !== -1;
        },
        treeClick(e) {
            let unitPa = {};
            if (e.value == 0) return;
            if (e.type == 'unit') {
                let parentV = this.$refs.tree.getNode(e).parent.data;
                unitPa = {
                    parentValue: parentV.value,
                    type: e.type,
                    value: e.value
                };
                this.$emit('organId', unitPa);
            } else {
                this.$emit('organId', e);
            }
        }
    },
    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>